<!--html模版部分-->
<template>
  <div id="app">
    <my-component></my-component>
  </div>
<!--  <div class="container-scroller">-->
<!--    &lt;!&ndash; ... 其他代码 ... &ndash;&gt;-->
<!--    <button @click="showSuccess" class="btn btn-success">成功提示</button>-->
<!--    <button @click="confirmAction" class="btn btn-danger">删除确认</button>-->
<!--    <button @click="customAlert" class="btn btn-info">自定义弹窗</button>-->
<!--  </div>-->
  <div class="container-scroller">
    <!-- 部分:partials/_navbar.html -->
    <nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex align-items-top flex-row">
      <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start">
        <div class="me-3">
          <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-bs-toggle="minimize">
            <span class="icon-menu"></span>
          </button>
        </div>
        <div>
          <a class="navbar-brand brand-logo" href="index.html">
            <img src="../assets/images/logo.svg" alt="logo" />
          </a>
          <a class="navbar-brand brand-logo-mini" href="index.html">
            <img src="../assets/images/logo-mini.svg" alt="logo" />
          </a>
        </div>
      </div>
      <div class="navbar-menu-wrapper d-flex align-items-top">
        <ul class="navbar-nav">
          <li class="nav-item font-weight-semibold d-none d-lg-block ms-0">
            <h1 class="welcome-text"><span id="greeting">{{greeting}}</span><span class="text-black fw-bold">{{userName}}</span></h1>
            <h3 class="welcome-sub-text">测试阶段</h3>
          </li>
        </ul>
        <ul class="navbar-nav ms-auto">
<!--          <li class="nav-item dropdown d-none d-lg-block">
            <a class="nav-link dropdown-bordered dropdown-toggle dropdown-toggle-split" id="messageDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false"> 选择类别 </a>
            <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0" aria-labelledby="messageDropdown">
              <a class="dropdown-item py-3" >
                <p class="mb-0 font-weight-medium float-left">选择类别</p>
              </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item preview-item">
                <div class="preview-item-content flex-grow py-2">
                  <p class="preview-subject ellipsis font-weight-medium text-dark">待完善功能</p>
                  <p class="fw-light small-text mb-0">功能说明</p>
                </div>
              </a>
&lt;!&ndash;              <a class="dropdown-item preview-item">&ndash;&gt;
&lt;!&ndash;                <div class="preview-item-content flex-grow py-2">&ndash;&gt;
&lt;!&ndash;                  <p class="preview-subject ellipsis font-weight-medium text-dark">角包</p>&ndash;&gt;
&lt;!&ndash;                  <p class="fw-light small-text mb-0">你在Angular项目中所需要的一切</p>&ndash;&gt;
&lt;!&ndash;                </div>&ndash;&gt;
&lt;!&ndash;              </a>&ndash;&gt;
&lt;!&ndash;              <a class="dropdown-item preview-item">&ndash;&gt;
&lt;!&ndash;                <div class="preview-item-content flex-grow py-2">&ndash;&gt;
&lt;!&ndash;                  <p class="preview-subject ellipsis font-weight-medium text-dark">VUE包</p>&ndash;&gt;
&lt;!&ndash;                  <p class="fw-light small-text mb-0">捆绑6高级Vue管理仪表板</p>&ndash;&gt;
&lt;!&ndash;                </div>&ndash;&gt;
&lt;!&ndash;              </a>&ndash;&gt;
&lt;!&ndash;              <a class="dropdown-item preview-item">&ndash;&gt;
&lt;!&ndash;                <div class="preview-item-content flex-grow py-2">&ndash;&gt;
&lt;!&ndash;                  <p class="preview-subject ellipsis font-weight-medium text-dark">反应包</p>&ndash;&gt;
&lt;!&ndash;                  <p class="fw-light small-text mb-0">一包8个高级React管理仪表板</p>&ndash;&gt;
&lt;!&ndash;                </div>&ndash;&gt;
&lt;!&ndash;              </a>&ndash;&gt;
            </div>
          </li>-->
<!--          <li class="nav-item d-none d-lg-block">
            <div id="datepicker-popup" class="input-group date datepicker navbar-date-picker">
              <span class="input-group-addon input-group-prepend border-right">
                <span class="icon-calendar input-group-text calendar-icon"></span>
              </span>
              <input type="text" class="form-control">
            </div>
          </li>-->
<!--          <li class="nav-item">
            <form class="search-form" action="#">
              <i class="icon-search"></i>
              <input type="search" class="form-control" placeholder="在这里搜索" title="在这里搜索">
            </form>
          </li>-->
<!--          <li class="nav-item dropdown">
            <a class="nav-link count-indicator" id="notificationDropdown" href="#" data-bs-toggle="dropdown">
              <i class="icon-mail icon-lg"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0" aria-labelledby="notificationDropdown">
              <a class="dropdown-item py-3 border-bottom">
                <p class="mb-0 font-weight-medium float-left">你有4条新通知 </p>
                <span class="badge badge-pill badge-primary float-right">查看所有</span>
              </a>
              <a class="dropdown-item preview-item py-3">
                <div class="preview-thumbnail">
                  <i class="mdi mdi-alert m-auto text-primary"></i>
                </div>
                <div class="preview-item-content">
                  <h6 class="preview-subject fw-normal text-dark mb-1">应用程序错误</h6>
                  <p class="fw-light small-text mb-0">刚才</p>
                </div>
              </a>
              <a class="dropdown-item preview-item py-3">
                <div class="preview-thumbnail">
                  <i class="mdi mdi-settings m-auto text-primary"></i>
                </div>
                <div class="preview-item-content">
                  <h6 class="preview-subject fw-normal text-dark mb-1">设置</h6>
                  <p class="fw-light small-text mb-0">私人消息</p>
                </div>
              </a>
              <a class="dropdown-item preview-item py-3">
                <div class="preview-thumbnail">
                  <i class="mdi mdi-airballoon m-auto text-primary"></i>
                </div>
                <div class="preview-item-content">
                  <h6 class="preview-subject fw-normal text-dark mb-1">新用户注册</h6>
                  <p class="fw-light small-text mb-0">2天前</p>
                </div>
              </a>
            </div>
          </li>-->
<!--          <li class="nav-item dropdown">
            <a class="nav-link count-indicator" id="countDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false">
              <i class="icon-bell"></i>
              <span class="count"></span>
            </a>
            <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0" aria-labelledby="countDropdown">
              <a class="dropdown-item py-3">
                <p class="mb-0 font-weight-medium float-left">你有7封未读邮件 </p>
                <span class="badge badge-pill badge-primary float-right">查看所有</span>
              </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <img src="../assets/images/faces/face10.jpg" alt="image" class="img-sm profile-pic">
                </div>
                <div class="preview-item-content flex-grow py-2">
                  <p class="preview-subject ellipsis font-weight-medium text-dark">玛丽安·加纳 </p>
                  <p class="fw-light small-text mb-0">会议取消了。</p>
                </div>
              </a>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <img src="../assets/images/faces/face12.jpg" alt="image" class="img-sm profile-pic">
                </div>
                <div class="preview-item-content flex-grow py-2">
                  <p class="preview-subject ellipsis font-weight-medium text-dark">大卫·格雷 </p>
                  <p class="fw-light small-text mb-0">会议取消了。</p>
                </div>
              </a>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <img src="../assets/images/faces/face1.jpg" alt="image" class="img-sm profile-pic">
                </div>
                <div class="preview-item-content flex-grow py-2">
                  <p class="preview-subject ellipsis font-weight-medium text-dark">特拉维斯·詹金斯 </p>
                  <p class="fw-light small-text mb-0">会议取消了。</p>
                </div>
              </a>
            </div>
          </li>-->
          <li class="nav-item dropdown d-none d-lg-block user-dropdown">
            <a class="nav-link" id="UserDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false">
              <img class="img-xs rounded-circle" src="../assets/images/faces/face8.jpg" alt="Profile image"> </a>
            <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="UserDropdown">
              <div class="dropdown-header text-center">
                <img class="img-md rounded-circle" src="../assets/images/faces/face8.jpg" alt="Profile image">
                <p class="mb-1 mt-3 font-weight-semibold">{{userName}}</p>
                <p class="fw-light text-muted mb-0" v-if="userData">{{userData.phone}}</p>
              </div>
              <a class="dropdown-item" @click="showUserInfo"><i class="dropdown-item-icon mdi mdi-account-outline text-primary me-2"></i> 我的资料 <span class="badge badge-pill badge-danger">1</span></a>
              <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-message-text-outline text-primary me-2"></i> 消息</a>
              <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-calendar-check-outline text-primary me-2"></i> 活动</a>
              <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-help-circle-outline text-primary me-2"></i> 常见问题解答</a>
              <a class="dropdown-item" @click="logout"><i class="dropdown-item-icon mdi mdi-power text-primary me-2"></i> 退出登录</a>
            </div>
          </li>
          <!-- 在顶部导航栏添加权限控制 -->
          <li class="nav-item dropdown d-none d-lg-block" v-if="isAdmin">
            <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="createbuttonDropdown">
              <h6 class="p-3 mb-0">用户管理</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item preview-item" @click="showCreateUserModal">
                <div class="preview-thumbnail">
                  <div class="preview-icon bg-dark rounded-circle">
                    <i class="mdi mdi-account-plus text-primary"></i>
                  </div>
                </div>
                <div class="preview-item-content">
                  <p class="preview-subject ellipsis mb-1">添加用户</p>
                </div>
              </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item preview-item">
                <div class="preview-thumbnail">
                  <div class="preview-icon bg-dark rounded-circle">
                    <i class="mdi mdi-account-edit text-info"></i>
                  </div>
                </div>
                <div class="preview-item-content">
                  <p class="preview-subject ellipsis mb-1">管理用户</p>
                </div>
              </a>
            </div>
          </li>
        </ul>
        <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-bs-toggle="offcanvas">
          <span class="mdi mdi-menu"></span>
        </button>
      </div>
    </nav>
    <!-- 部分 -->
    <div class="container-fluid page-body-wrapper">
      <!-- 部分:partials/_settings-panel.html -->
      <div class="theme-setting-wrapper">
        <div id="settings-trigger"><i class="ti-settings"></i></div>
        <div id="theme-settings" class="settings-panel">
          <i class="settings-close ti-close"></i>
          <p class="settings-heading">侧边栏皮肤</p>
          <div class="sidebar-bg-options selected" id="sidebar-light-theme"><div class="img-ss rounded-circle bg-light border me-3">光</div></div>
          <div class="sidebar-bg-options" id="sidebar-dark-theme"><div class="img-ss rounded-circle bg-dark border me-3">黑暗</div></div>
          <p class="settings-heading mt-2">头部皮肤</p>
          <div class="color-tiles mx-0 px-4">
            <div class="tiles success"></div>
            <div class="tiles warning"></div>
            <div class="tiles danger"></div>
            <div class="tiles info"></div>
            <div class="tiles dark"></div>
            <div class="tiles default"></div>
          </div>
        </div>
      </div>
      <div id="right-sidebar" class="settings-panel">
        <i class="settings-close ti-close"></i>
        <ul class="nav nav-tabs border-top" id="setting-panel" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="todo-tab" data-bs-toggle="tab" href="#todo-section" role="tab" aria-controls="todo-section" aria-expanded="true">待办事项</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="chats-tab" data-bs-toggle="tab" href="#chats-section" role="tab" aria-controls="chats-section">聊天</a>
          </li>
        </ul>
        <div class="tab-content" id="setting-content">
          <div class="tab-pane fade show active scroll-wrapper" id="todo-section" role="tabpanel" aria-labelledby="todo-section">
            <div class="add-items d-flex px-3 mb-0">
              <form class="form w-100">
                <div class="form-group d-flex">
                  <input type="text" class="form-control todo-list-input" placeholder="添加待办事项">
                  <button type="submit" class="add btn btn-primary todo-list-add-btn" id="add-task">添加</button>
                </div>
              </form>
            </div>
            <div class="list-wrapper px-3">
              <ul class="d-flex flex-column-reverse todo-list">
                <li>
                  <div class="form-check">
                    <label class="form-check-label">
                      <input class="checkbox" type="checkbox">
                      下午3时举行小组评审会议
                    </label>
                  </div>
                  <i class="remove ti-close"></i>
                </li>
                <li>
                  <div class="form-check">
                    <label class="form-check-label">
                      <input class="checkbox" type="checkbox">
                      准备演讲
                    </label>
                  </div>
                  <i class="remove ti-close"></i>
                </li>
                <li>
                  <div class="form-check">
                    <label class="form-check-label">
                      <input class="checkbox" type="checkbox">
                      解决所有今天到期的低优先级票
                    </label>
                  </div>
                  <i class="remove ti-close"></i>
                </li>
                <li class="completed">
                  <div class="form-check">
                    <label class="form-check-label">
                      <input class="checkbox" type="checkbox" checked>
                      安排下周开会
                    </label>
                  </div>
                  <i class="remove ti-close"></i>
                </li>
                <li class="completed">
                  <div class="form-check">
                    <label class="form-check-label">
                      <input class="checkbox" type="checkbox" checked>
                      项目审查
                    </label>
                  </div>
                  <i class="remove ti-close"></i>
                </li>
              </ul>
            </div>
            <h4 class="px-3 text-muted mt-5 fw-light mb-0">事件</h4>
            <div class="events pt-4 px-3">
              <div class="wrapper d-flex mb-2">
                <i class="ti-control-record text-primary me-2"></i>
                <span>2月 11 2018</span>
              </div>
              <p class="mb-0 font-weight-thin text-gray">创建组件页面构建一个js</p>
              <p class="text-gray mb-0">会话总数</p>
            </div>
            <div class="events pt-4 px-3">
              <div class="wrapper d-flex mb-2">
                <i class="ti-control-record text-primary me-2"></i>
                <span>Feb 7 2018</span>
              </div>
              <p class="mb-0 font-weight-thin text-gray">与Alisa会面</p>
              <p class="text-gray mb-0 ">打电话给莎拉·格雷夫斯</p>
            </div>
          </div>
          <!-- 来做节选项卡结束 -->
          <div class="tab-pane fade" id="chats-section" role="tabpanel" aria-labelledby="chats-section">
            <div class="d-flex align-items-center justify-content-between border-bottom">
              <p class="settings-heading border-top-0 mb-3 pl-3 pt-0 border-bottom-0 pb-0">朋友</p>
              <small class="settings-heading border-top-0 mb-3 pt-0 border-bottom-0 pb-0 pr-3 fw-normal">查看所有</small>
            </div>
            <ul class="chat-list">
              <li class="list active">
                <div class="profile"><img src="../assets/images/faces/face1.jpg" alt="image"><span class="online"></span></div>
                <div class="info">
                  <p>托马斯·道格拉斯</p>
                  <p>可用</p>
                </div>
                <small class="text-muted my-auto">19分钟</small>
              </li>
              <li class="list">
                <div class="profile"><img src="../assets/images/faces/face2.jpg" alt="image"><span class="offline"></span></div>
                <div class="info">
                  <div class="wrapper d-flex">
                    <p>凯瑟琳</p>
                  </div>
                  <p>离开</p>
                </div>
                <div class="badge badge-success badge-pill my-auto mx-2">4</div>
                <small class="text-muted my-auto">23分钟</small>
              </li>
              <li class="list">
                <div class="profile"><img src="../assets/images/faces/face3.jpg" alt="image"><span class="online"></span></div>
                <div class="info">
                  <p>丹尼尔·拉塞尔</p>
                  <p>可用</p>
                </div>
                <small class="text-muted my-auto">14分钟</small>
              </li>
              <li class="list">
                <div class="profile"><img src="../assets/images/faces/face4.jpg" alt="image"><span class="offline"></span></div>
                <div class="info">
                  <p>詹姆斯·理查森</p>
                  <p>离开</p>
                </div>
                <small class="text-muted my-auto">2分钟</small>
              </li>
              <li class="list">
                <div class="profile"><img src="../assets/images/faces/face5.jpg" alt="image"><span class="online"></span></div>
                <div class="info">
                  <p>马德琳·肯尼迪</p>
                  <p>可用</p>
                </div>
                <small class="text-muted my-auto">5分钟</small>
              </li>
              <li class="list">
                <div class="profile"><img src="../assets/images/faces/face6.jpg" alt="image"><span class="online"></span></div>
                <div class="info">
                  <p>莎拉·格雷夫斯</p>
                  <p>可用</p>
                </div>
                <small class="text-muted my-auto">47分钟</small>
              </li>
            </ul>
          </div>
          <!-- 聊天选项卡结束 -->
        </div>
      </div>
      <!-- 部分 -->
      <!-- 部分:partials/_sidebar.html -->
      <nav class="sidebar sidebar-offcanvas" id="sidebar">
        <ul class="nav">
          <!-- 侧边栏内容 -->
<!--          <li class="nav-item nav-category">网吧导航</li>-->
          <li class="nav-item">
            <a class="nav-link" @click="reloadPage">
              <i class="mdi mdi-grid-large menu-icon"></i>
              <span class="menu-equipment">主页</span>
            </a>
          </li>

          <!-- 管理员权限相关导航选项 - 根据用户角色显示 -->
          <li class="nav-item nav-category" v-if="isAdmin">管理员操作</li>
          <li class="nav-item" v-if="isAdmin">
            <a class="nav-link" data-bs-toggle="collapse" href="#ui-sb" aria-expanded="false" aria-controls="ui-sb">
              <i class="menu-icon mdi mdi-floor-plan"></i>
              <span class="menu-equipment">管理模块</span>
              <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="ui-sb">
              <ul class="nav flex-column sub-menu"><!--pages/equipment-management/status.vue-->
                <li class="nav-item"> <a class="nav-link" v-on:click="equipment">设备管理</a></li>
              </ul>
            </div>
<!--            <div class="collapse" id="ui-sb">
            <ul class="nav flex-column sub-menu">&lt;!&ndash;pages/equipment-management/status.vue&ndash;&gt;
              <li class="nav-item"> <a class="nav-link" >商品管理</a></li>
            </ul>
          </div>
            <div class="collapse" id="ui-sb">
            <ul class="nav flex-column sub-menu">&lt;!&ndash;pages/equipment-management/status.vue&ndash;&gt;
              <li class="nav-item"> <a class="nav-link" >用户管理</a></li>
            </ul>
          </div>-->
          </li>

<!--          <li class="nav-item nav-category">用户功能</li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#ui-user" aria-expanded="false" aria-controls="ui-user">
              <i class="menu-icon mdi mdi-floor-plan"></i>
              <span class="menu-equipment">测试功能</span>
              <i class="menu-arrow"></i>
            </a>
&lt;!&ndash;            <div class="collapse" id="ui-user">
              <ul class="nav flex-column sub-menu">&lt;!&ndash;pages/equipment-management/status.vue&ndash;&gt;
                <li class="nav-item"> <a class="nav-link" v-on:click="embarkation">用户上机</a></li>
              </ul>
            </div>&ndash;&gt;<div class="collapse" id="ui-user">
            <ul class="nav flex-column sub-menu">&lt;!&ndash;pages/equipment-management/status.vue&ndash;&gt;
              <li class="nav-item"> <a class="nav-link" v-on:click="product">购买商品</a></li>
              </ul>
            </div>
          </li>-->
          <li class="nav-item nav-category">页面</li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
              <i class="menu-icon mdi mdi-account-circle-outline"></i>
              <span class="menu-title">用户页面</span>
              <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="auth">
              <ul class="nav flex-column sub-menu"><!--pages/samples/login.html-->
                <li class="nav-item"><router-link to="/" class="nav-link">登录</router-link></li>
              </ul>
            </div>
          </li>
        </ul>
      </nav>

      <!-- 部分 -->
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-sm-12">
              <div id="manage" class="home-tab" v-if="userData && userData.job === 1">
                <div class="d-sm-flex align-items-center justify-content-between border-bottom">
                  <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active ps-0" id="home-tab" data-bs-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-selected="true">统计</a>
                    </li>
<!--                    <li class="nav-item">
                      <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#audiences" role="tab" aria-selected="false">受众</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#demographics" role="tab" aria-selected="false">人口统计</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link border-0" id="more-tab" data-bs-toggle="tab" href="#more" role="tab" aria-selected="false">更多</a>
                    </li>-->
                  </ul>
                  <div>
                    <div class="btn-wrapper">
<!--                      <a href="#" class="btn btn-otline-dark align-items-center"><i class="icon-share"></i> 分享</a>-->
<!--                      <a href="#" class="btn btn-otline-dark"><i class="icon-printer"></i> 打印</a>-->
                      <a class="btn btn-primary text-white me-0" @click="showCreateUserModal" v-if="isAdmin">添加用户</a>
                      <a class="btn btn-primary text-white me-0" @click="showRechargeModal" v-if="isAdmin">用户充值</a>
                    </div>
                  </div>
                </div>
                <div class="tab-content tab-content-basic">
                  <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview">
                    <!-- 加载状态和错误处理 -->
                    <div v-if="isLoading" class="loading-overlay">
                      <div class="loading-spinner"></div>
                      <div class="loading-text">加载数据中...</div>
                    </div>
                    
                    <div class="row">
                      <div class="col-sm-12">
                        <div class="statistics-details d-flex align-items-center justify-content-between">
                          <div>
                            <p class="statistics-title">上机次数</p>
                            <h3 class="rate-percentage">{{statisticsdata.todayComputer || 0}}次</h3>
                            <p :class="statisticsdata.todayComputer >= statisticsdata.todayComputer_yd ? 'text-success d-flex' : 'text-danger d-flex'">
                              <i :class="statisticsdata.todayComputer >= statisticsdata.todayComputer_yd ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"></i>
                              <span>{{Math.abs(statisticsdata.todayComputer - statisticsdata.todayComputer_yd) || 0}}</span>
                            </p>
                          </div>
                          <div>
                            <p class="statistics-title">结算收入</p>
                            <h3 class="rate-percentage">¥{{statisticsdata.todaySettlement || 0}}</h3>
                            <p :class="statisticsdata.todaySettlement >= statisticsdata.todaySettlement_yd ? 'text-success d-flex' : 'text-danger d-flex'">
                              <i :class="statisticsdata.todaySettlement >= statisticsdata.todaySettlement_yd ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"></i>
                              <span>{{Math.abs(statisticsdata.todaySettlement - statisticsdata.todaySettlement_yd) || 0}}</span>
                            </p>
                          </div>
                          <div>
                            <p class="statistics-title">新用户</p>
                            <h3 class="rate-percentage">{{user.todayUser || 0}}</h3>
                            <p :class="user.todayUser >= user.yesterdayUser ? 'text-success d-flex' : 'text-danger d-flex'">
                              <i :class="user.todayUser >= user.yesterdayUser ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"></i>
                              <span>{{Math.abs(user.todayUser - user.yesterdayUser) || 0}}</span>
                            </p>
                          </div>
                          <div class="d-none d-md-block">
                            <p class="statistics-title">充值金额</p>
                            <h3 class="rate-percentage">¥{{statisticsdata.todayRecharge || 0}}</h3>
                            <p :class="statisticsdata.todayRecharge >= statisticsdata.todayRecharge_yd ? 'text-success d-flex' : 'text-danger d-flex'">
                              <i :class="statisticsdata.todayRecharge >= statisticsdata.todayRecharge_yd ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"></i>
                              <span>{{Math.abs(statisticsdata.todayRecharge - statisticsdata.todayRecharge_yd) || 0}}</span>
                            </p>
                          </div>
                          <div class="d-none d-md-block">
                            <p class="statistics-title">平均时间</p>
                            <h3 class="rate-percentage">{{Math.floor((statisticsdata.todayAverageTime || 0)/60) }}h:{{(statisticsdata.todayAverageTime || 0)%60}}m</h3>
                            <p :class="statisticsdata.todayAverageTime >= statisticsdata.todayAverageTime_yd ? 'text-success d-flex' : 'text-danger d-flex'">
                              <i :class="statisticsdata.todayAverageTime >= statisticsdata.todayAverageTime_yd ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"></i>
                              <span>{{statisticsdata.todayAverageTime_yd ? Math.round((Math.abs(statisticsdata.todayAverageTime - statisticsdata.todayAverageTime_yd) / statisticsdata.todayAverageTime_yd) * 100) : 0}}%</span>
                            </p>
                          </div>
                          <div class="d-none d-md-block">
                            <p class="statistics-title">总上机时间</p>
                            <h3 class="rate-percentage">{{Math.floor((statisticsdata.todayAssembleTime || 0)/60)}}h:{{(statisticsdata.todayAssembleTime || 0)%60}}m</h3>
                            <p :class="statisticsdata.todayAssembleTime >= statisticsdata.todayAssembleTime_yd ? 'text-success d-flex' : 'text-danger d-flex'">
                              <i :class="statisticsdata.todayAssembleTime >= statisticsdata.todayAssembleTime_yd ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"></i>
                              <span>{{statisticsdata.todayAssembleTime_yd ? Math.round((Math.abs(statisticsdata.todayAssembleTime - statisticsdata.todayAssembleTime_yd) / statisticsdata.todayAssembleTime_yd) * 100) : 0}}%</span>
                            </p>
                          </div>
                        </div>
                      </div>
                      <div><h1>测试</h1>
                        <div class="col-lg-12 grid-margin stretch-card">
                        <div class="card">
                          <div class="card-body">
                            <h4 class="card-title">Striped Table</h4>
                            <p class="card-description">
                              Add class <code>.table-striped</code>
                            </p>
                            <div class="table-responsive">
                              <table class="table table-striped">
                                <thead>
                                <tr>
                                  <th>
                                    User
                                  </th>
                                  <th>
                                    First name
                                  </th>
                                  <th>
                                    Progress
                                  </th>
                                  <th>
                                    Amount
                                  </th>
                                  <th>
                                    Deadline
                                  </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                  <td class="py-1">
                                    <img src="" alt="image"/>
                                  </td>
                                  <td>
                                    Herman Beck
                                  </td>
                                  <td>
                                    <div class="progress">
                                      <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                                  </td>
                                  <td>
                                    $ 77.99
                                  </td>
                                  <td>
                                    May 15, 2015
                                  </td>
                                </tr>
                                <tr>
                                  <td class="py-1">
                                    <img src="" alt="image"/>
                                  </td>
                                  <td>
                                    Messsy Adam
                                  </td>
                                  <td>
                                    <div class="progress">
                                      <div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                  </td>
                                  <td>
                                    $245.30
                                  </td>
                                  <td>
                                    July 1, 2015
                                  </td>
                                </tr>
                                <tr>
                                  <td class="py-1">
                                    <img src="" alt="image"/>
                                  </td>
                                  <td>
                                    John Richards
                                  </td>
                                  <td>
                                    <div class="progress">
                                      <div class="progress-bar bg-warning" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                  </td>
                                  <td>
                                    $138.00
                                  </td>
                                  <td>
                                    Apr 12, 2015
                                  </td>
                                </tr>
                                <tr>
                                  <td class="py-1">
                                    <img src="" alt="image"/>
                                  </td>
                                  <td>
                                    Peter Meggik
                                  </td>
                                  <td>
                                    <div class="progress">
                                      <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                  </td>
                                  <td>
                                    $ 77.99
                                  </td>
                                  <td>
                                    May 15, 2015
                                  </td>
                                </tr>
                                <tr>
                                  <td class="py-1">
                                    <img src="" alt="image"/>
                                  </td>
                                  <td>
                                    Edward
                                  </td>
                                  <td>
                                    <div class="progress">
                                      <div class="progress-bar bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                  </td>
                                  <td>
                                    $ 160.25
                                  </td>
                                  <td>
                                    May 03, 2015
                                  </td>
                                </tr>
                                <tr>
                                  <td class="py-1">
                                    <img src="" alt="image"/>
                                  </td>
                                  <td>
                                    John Doe
                                  </td>
                                  <td>
                                    <div class="progress">
                                      <div class="progress-bar bg-info" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                  </td>
                                  <td>
                                    $ 123.21
                                  </td>
                                  <td>
                                    April 05, 2015
                                  </td>
                                </tr>
                                <tr>
                                  <td class="py-1">
                                    <img src="" alt="image"/>
                                  </td>
                                  <td>
                                    Henry Tom
                                  </td>
                                  <td>
                                    <div class="progress">
                                      <div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                  </td>
                                  <td>
                                    $ 150.00
                                  </td>
                                  <td>
                                    June 16, 2015
                                  </td>
                                </tr>
                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div></div>
                    </div>
<!--                    <div class="row">
                      <div class="col-lg-8 d-flex flex-column">
                        <div class="row flex-grow">
                          <div class="col-12 col-lg-4 col-lg-12 grid-margin stretch-card">
                            <div class="card card-rounded">
                              <div class="card-body">
                                <div class="d-sm-flex justify-content-between align-items-start">
                                  <div>
                                    <h4 class="card-title card-title-dash">性能折线图</h4>
                                    <h5 class="card-subtitle card-subtitle-dash">Lorem Ipsum就是简单的虚拟文本的打印</h5>
                                  </div>
                                  <div id="performance-line-legend"></div>
                                </div>
                                <div class="chartjs-wrapper mt-5">
                                  <canvas id="performaneLine"></canvas>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-lg-4 d-flex flex-column">
                        <div class="row flex-grow">
                          <div class="col-md-6 col-lg-12 grid-margin stretch-card">
                            <div class="card bg-primary card-rounded">
                              <div class="card-body pb-0">
                                <h4 class="card-title card-title-dash text-white mb-4">状态摘要</h4>
                                <div class="row">
                                  <div class="col-sm-4">
                                    <p class="status-summary-ight-white mb-1">封闭的价值</p>
                                    <h2 class="text-info">357</h2>
                                  </div>
                                  <div class="col-sm-8">
                                    <div class="status-summary-chart-wrapper pb-4">
                                      <canvas id="status-summary"></canvas>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-12 grid-margin stretch-card">
                            <div class="card card-rounded">
                              <div class="card-body">
                                <div class="row">
                                  <div class="col-sm-6">
                                    <div class="d-flex justify-content-between align-items-center mb-2 mb-sm-0">
                                      <div class="circle-progress-width">
                                        <div id="totalVisitors" class="progressbar-js-circle pr-2"></div>
                                      </div>
                                      <div>
                                        <p class="text-small mb-2">总游客</p>
                                        <h4 class="mb-0 fw-bold">26.80%</h4>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-sm-6">
                                    <div class="d-flex justify-content-between align-items-center">
                                      <div class="circle-progress-width">
                                        <div id="visitperday" class="progressbar-js-circle pr-2"></div>
                                      </div>
                                      <div>
                                        <p class="text-small mb-2">每日访问量</p>
                                        <h4 class="mb-0 fw-bold">9065</h4>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>-->
<!--                    <div class="row">
                      <div class="col-lg-8 d-flex flex-column">
                        <div class="row flex-grow">
                          <div class="col-12 grid-margin stretch-card">
                            <div class="card card-rounded">
                              <div class="card-body">
                                <div class="d-sm-flex justify-content-between align-items-start">
                                  <div>
                                    <h4 class="card-title card-title-dash">市场概述</h4>
                                    <p class="card-subtitle card-subtitle-dash">Lorem ipsum dolor是一个连续的服务精英</p>
                                  </div>
                                  <div>
                                    <div class="dropdown">
                                      <button class="btn btn-secondary dropdown-toggle toggle-dark btn-lg mb-0 me-0" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 本月 </button>
                                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                                        <h6 class="dropdown-header">设置</h6>
                                        <a class="dropdown-item" href="#">行动</a>
                                        <a class="dropdown-item" href="#">另一个动作</a>
                                        <a class="dropdown-item" href="#">这里还有别的东西</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">分离的链接</a>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="d-sm-flex align-items-center mt-1 justify-content-between">
                                  <div class="d-sm-flex align-items-center mt-4 justify-content-between"><h2 class="me-2 fw-bold">36,2531.00</h2><h4 class="me-2">元</h4><h4 class="text-success">(+1.37%)</h4></div>
                                  <div class="me-3"><div id="marketing-overview-legend"></div></div>
                                </div>
                                <div class="chartjs-bar-wrapper mt-3">
                                  <canvas id="marketingOverview"></canvas>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row flex-grow">
                          <div class="col-12 grid-margin stretch-card">
                            <div class="card card-rounded">
                              <div class="card-body">
                                <div class="d-sm-flex justify-content-between align-items-start">
                                  <div>
                                    <h4 class="card-title card-title-dash">挂起的请求</h4>
                                    <p class="card-subtitle card-subtitle-dash">你有50多个新请求</p>
                                  </div>
                                  <div>
                                    <button class="btn btn-primary btn-lg text-white mb-0 me-0" type="button"><i class="mdi mdi-account-plus"></i>添加新成员</button>
                                  </div>
                                </div>
                                <div class="table-responsive  mt-1">
                                  <table class="table select-table">
                                    <thead>
                                    <tr>
                                      <th>
                                        <div class="form-check form-check-flat mt-0">
                                          <label class="form-check-label">
                                            <input type="checkbox" class="form-check-input" aria-checked="false"><i class="input-helper"></i></label>
                                        </div>
                                      </th>
                                      <th>客户</th>
                                      <th>公司</th>
                                      <th>进度</th>
                                      <th>状态</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                      <td>
                                        <div class="form-check form-check-flat mt-0">
                                          <label class="form-check-label">
                                            <input type="checkbox" class="form-check-input" aria-checked="false"><i class="input-helper"></i></label>
                                        </div>
                                      </td>
                                      <td>
                                        <div class="d-flex ">
                                          <img src="../assets/images/faces/face1.jpg" alt="">
                                          <div>
                                            <h6>布兰登·华盛顿</h6>
                                            <p>首席管理员</p>
                                          </div>
                                        </div>
                                      </td>
                                      <td>
                                        <h6>公司名称1</h6>
                                        <p>公司类型</p>
                                      </td>
                                      <td>
                                        <div>
                                          <div class="d-flex justify-content-between align-items-center mb-1 max-width-progress-wrap">
                                            <p class="text-success">79%</p>
                                            <p>85/162</p>
                                          </div>
                                          <div class="progress progress-md">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                          </div>
                                        </div>
                                      </td>
                                      <td><div class="badge badge-opacity-warning">进行中</div></td>
                                    </tr>
                                    <tr>
                                      <td>
                                        <div class="form-check form-check-flat mt-0">
                                          <label class="form-check-label">
                                            <input type="checkbox" class="form-check-input" aria-checked="false"><i class="input-helper"></i></label>
                                        </div>
                                      </td>
                                      <td>
                                        <div class="d-flex">
                                          <img src="../assets/images/faces/face2.jpg" alt="">
                                          <div>
                                            <h6>劳拉·布鲁克斯</h6>
                                            <p>首席管理员</p>
                                          </div>
                                        </div>
                                      </td>
                                      <td>
                                        <h6>公司名称1</h6>
                                        <p>公司类型</p>
                                      </td>
                                      <td>
                                        <div>
                                          <div class="d-flex justify-content-between align-items-center mb-1 max-width-progress-wrap">
                                            <p class="text-success">65%</p>
                                            <p>85/162</p>
                                          </div>
                                          <div class="progress progress-md">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                          </div>
                                        </div>
                                      </td>
                                      <td><div class="badge badge-opacity-success">已完成</div></td>
                                    </tr>
                                    <tr>
                                      <td>
                                        <div class="form-check form-check-flat mt-0">
                                          <label class="form-check-label">
                                            <input type="checkbox" class="form-check-input" aria-checked="false"><i class="input-helper"></i></label>
                                        </div>
                                      </td>
                                      <td>
                                        <div class="d-flex">
                                          <img src="../assets/images/faces/face3.jpg" alt="">
                                          <div>
                                            <h6>韦恩·墨菲</h6>
                                            <p>首席管理员</p>
                                          </div>
                                        </div>
                                      </td>
                                      <td>
                                        <h6>公司名称1</h6>
                                        <p>公司类型</p>
                                      </td>
                                      <td>
                                        <div>
                                          <div class="d-flex justify-content-between align-items-center mb-1 max-width-progress-wrap">
                                            <p class="text-success">65%</p>
                                            <p>85/162</p>
                                          </div>
                                          <div class="progress progress-md">
                                            <div class="progress-bar bg-warning" role="progressbar" style="width: 38%" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100"></div>
                                          </div>
                                        </div>
                                      </td>
                                      <td><div class="badge badge-opacity-warning">进行中</div></td>
                                    </tr>
                                    <tr>
                                      <td>
                                        <div class="form-check form-check-flat mt-0">
                                          <label class="form-check-label">
                                            <input type="checkbox" class="form-check-input" aria-checked="false"><i class="input-helper"></i></label>
                                        </div>
                                      </td>
                                      <td>
                                        <div class="d-flex">
                                          <img src="../assets/images/faces/face4.jpg" alt="">
                                          <div>
                                            <h6>马修·贝利</h6>
                                            <p>首席管理员</p>
                                          </div>
                                        </div>
                                      </td>
                                      <td>
                                        <h6>公司名称1</h6>
                                        <p>公司类型</p>
                                      </td>
                                      <td>
                                        <div>
                                          <div class="d-flex justify-content-between align-items-center mb-1 max-width-progress-wrap">
                                            <p class="text-success">65%</p>
                                            <p>85/162</p>
                                          </div>
                                          <div class="progress progress-md">
                                            <div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                                          </div>
                                        </div>
                                      </td>
                                      <td><div class="badge badge-opacity-danger">待处理</div></td>
                                    </tr>
                                    <tr>
                                      <td>
                                        <div class="form-check form-check-flat mt-0">
                                          <label class="form-check-label">
                                            <input type="checkbox" class="form-check-input" aria-checked="false"><i class="input-helper"></i></label>
                                        </div>
                                      </td>
                                      <td>
                                        <div class="d-flex">
                                          <img src="../assets/images/faces/face5.jpg" alt="">
                                          <div>
                                            <h6>凯瑟琳·巴特勒</h6>
                                            <p>首席管理员</p>
                                          </div>
                                        </div>
                                      </td>
                                      <td>
                                        <h6>公司名称1</h6>
                                        <p>公司类型</p>
                                      </td>
                                      <td>
                                        <div>
                                          <div class="d-flex justify-content-between align-items-center mb-1 max-width-progress-wrap">
                                            <p class="text-success">65%</p>
                                            <p>85/162</p>
                                          </div>
                                          <div class="progress progress-md">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                          </div>
                                        </div>
                                      </td>
                                      <td><div class="badge badge-opacity-success">已完成</div></td>
                                    </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row flex-grow">
                          <div class="col-md-6 col-lg-6 grid-margin stretch-card">
                            <div class="card card-rounded">
                              <div class="card-body card-rounded">
                                <h4 class="card-title  card-title-dash">最近事件</h4>
                                <div class="list align-items-center border-bottom py-2">
                                  <div class="wrapper w-100">
                                    <p class="mb-2 font-weight-medium">
                                      董事会变更
                                    </p>
                                    <div class="d-flex justify-content-between align-items-center">
                                      <div class="d-flex align-items-center">
                                        <i class="mdi mdi-calendar text-muted me-1"></i>
                                        <p class="mb-0 text-small text-muted">2019年3月14日</p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="list align-items-center border-bottom py-2">
                                  <div class="wrapper w-100">
                                    <p class="mb-2 font-weight-medium">
                                      其他事件
                                    </p>
                                    <div class="d-flex justify-content-between align-items-center">
                                      <div class="d-flex align-items-center">
                                        <i class="mdi mdi-calendar text-muted me-1"></i>
                                        <p class="mb-0 text-small text-muted">2019年3月14日</p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="list align-items-center border-bottom py-2">
                                  <div class="wrapper w-100">
                                    <p class="mb-2 font-weight-medium">
                                      季度报告
                                    </p>
                                    <div class="d-flex justify-content-between align-items-center">
                                      <div class="d-flex align-items-center">
                                        <i class="mdi mdi-calendar text-muted me-1"></i>
                                        <p class="mb-0 text-small text-muted">2019年3月14日</p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="list align-items-center border-bottom py-2">
                                  <div class="wrapper w-100">
                                    <p class="mb-2 font-weight-medium">
                                      董事会变更
                                    </p>
                                    <div class="d-flex justify-content-between align-items-center">
                                      <div class="d-flex align-items-center">
                                        <i class="mdi mdi-calendar text-muted me-1"></i>
                                        <p class="mb-0 text-small text-muted">2019年3月14日</p>
                                      </div>
                                    </div>
                                  </div>
                                </div>

                                <div class="list align-items-center pt-3">
                                  <div class="wrapper w-100">
                                    <p class="mb-0">
                                      <a href="#" class="fw-bold text-primary">显示所有 <i class="mdi mdi-arrow-right ms-2"></i></a>
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-6 grid-margin stretch-card">
                            <div class="card card-rounded">
                              <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between mb-3">
                                  <h4 class="card-title card-title-dash">活动</h4>
                                  <p class="mb-0">20个已完成，5个剩余</p>
                                </div>
                                <ul class="bullet-line-list">
                                  <li>
                                    <div class="d-flex justify-content-between">
                                      <div><span class="text-light-green">本·托塞尔</span> 分配给你一个任务</div>
                                      <p>刚刚</p>
                                    </div>
                                  </li>
                                  <li>
                                    <div class="d-flex justify-content-between">
                                      <div><span class="text-light-green">奥利弗·诺亚</span> 分配给你一个任务</div>
                                      <p>1小时</p>
                                    </div>
                                  </li>
                                  <li>
                                    <div class="d-flex justify-content-between">
                                      <div><span class="text-light-green">杰克·威廉姆斯</span> 分配给你一个任务</div>
                                      <p>1小时</p>
                                    </div>
                                  </li>
                                  <li>
                                    <div class="d-flex justify-content-between">
                                      <div><span class="text-light-green">里奥·卢卡斯</span> 分配给你一个任务</div>
                                      <p>1小时</p>
                                    </div>
                                  </li>
                                  <li>
                                    <div class="d-flex justify-content-between">
                                      <div><span class="text-light-green">托马斯·亨利</span> 分配给你一个任务</div>
                                      <p>1小时</p>
                                    </div>
                                  </li>
                                  <li>
                                    <div class="d-flex justify-content-between">
                                      <div><span class="text-light-green">本·托塞尔</span> 分配给你一个任务</div>
                                      <p>1小时</p>
                                    </div>
                                  </li>
                                  <li>
                                    <div class="d-flex justify-content-between">
                                      <div><span class="text-light-green">本·托塞尔</span> 分配给你一个任务</div>
                                      <p>1小时</p>
                                    </div>
                                  </li>
                                </ul>
                                <div class="list align-items-center pt-3">
                                  <div class="wrapper w-100">
                                    <p class="mb-0">
                                      <a href="#" class="fw-bold text-primary">显示所有 <i class="mdi mdi-arrow-right ms-2"></i></a>
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-lg-4 d-flex flex-column">
                        <div class="row flex-grow">
                          <div class="col-12 grid-margin stretch-card">
                            <div class="card card-rounded">
                              <div class="card-body">
                                <div class="row">
                                  <div class="col-lg-12">
                                    <div class="d-flex justify-content-between align-items-center">
                                      <h4 class="card-title card-title-dash">待办事项</h4>
                                      <div class="add-items d-flex mb-0">
                                        <button class="add btn btn-icons btn-rounded btn-primary todo-list-add-btn text-white me-0 pl-12p"><i class="mdi mdi-plus"></i></button>
                                      </div>
                                    </div>
                                    <div class="list-wrapper">
                                      <ul class="todo-list todo-list-rounded">
                                        <li class="d-block">
                                          <div class="form-check w-100">
                                            <label class="form-check-label">
                                              <input class="checkbox" type="checkbox"> Lorem Ipsum是简单的打印文本 <i class="input-helper rounded"></i>
                                            </label>
                                            <div class="d-flex mt-2">
                                              <div class="ps-4 text-small me-3">2020年6月24日</div>
                                              <div class="badge badge-opacity-warning me-3">到期明天</div>
                                              <i class="mdi mdi-flag ms-2 flag-color"></i>
                                            </div>
                                          </div>
                                        </li>
                                        <li class="d-block">
                                          <div class="form-check w-100">
                                            <label class="form-check-label">
                                              <input class="checkbox" type="checkbox"> Lorem Ipsum是简单的打印文本 <i class="input-helper rounded"></i>
                                            </label>
                                            <div class="d-flex mt-2">
                                              <div class="ps-4 text-small me-3">2020年6月23日</div>
                                              <div class="badge badge-opacity-success me-3">完成</div>
                                            </div>
                                          </div>
                                        </li>
                                        <li>
                                          <div class="form-check w-100">
                                            <label class="form-check-label">
                                              <input class="checkbox" type="checkbox"> Lorem Ipsum是简单的打印文本 <i class="input-helper rounded"></i>
                                            </label>
                                            <div class="d-flex mt-2">
                                              <div class="ps-4 text-small me-3">2020年6月24日</div>
                                              <div class="badge badge-opacity-success me-3">完成</div>
                                            </div>
                                          </div>
                                        </li>
                                        <li class="border-bottom-0">
                                          <div class="form-check w-100">
                                            <label class="form-check-label">
                                              <input class="checkbox" type="checkbox"> Lorem Ipsum是简单的打印文本 <i class="input-helper rounded"></i>
                                            </label>
                                            <div class="d-flex mt-2">
                                              <div class="ps-4 text-small me-3">2020年6月24日</div>
                                              <div class="badge badge-opacity-danger me-3">过期</div>
                                            </div>
                                          </div>
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row flex-grow">
                          <div class="col-12 grid-margin stretch-card">
                            <div class="card card-rounded">
                              <div class="card-body">
                                <div class="row">
                                  <div class="col-lg-12">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                      <div>
                                      <h4 class="card-title card-title-dash">按金额分类</h4>
                                      </div>
                                      <div>
                                        <div class="dropdown">
                                          <button class="btn btn-secondary dropdown-toggle toggle-dark btn-lg mb-0 me-0" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Month Wise </button>
                                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                                            <h6 class="dropdown-header">week Wise</h6>
                                            <a class="dropdown-item" href="#">Year Wise</a>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="mt-3">
                                      <canvas id="leaveReport"></canvas>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row flex-grow">
                          <div class="col-12 grid-margin stretch-card">
                            <div class="card card-rounded">
                              <div class="card-body">
                                <div class="row">
                                  <div class="col-lg-12">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                      <div>
                                        <h4 class="card-title card-title-dash">Top Performer</h4>
                                      </div>
                                    </div>
                                    <div class="mt-3">
                                      <div class="wrapper d-flex align-items-center justify-content-between py-2 border-bottom">
                                        <div class="d-flex">
                                          <img class="img-sm rounded-10" src="../assets/images/faces/face1.jpg" alt="profile">
                                          <div class="wrapper ms-3">
                                            <p class="ms-1 mb-1 fw-bold">Brandon Washington</p>
                                            <small class="text-muted mb-0">162543</small>
                                          </div>
                                        </div>
                                        <div class="text-muted text-small">
                                          1小时前
                                        </div>
                                      </div>
                                      <div class="text-muted text-small">
                                        1小时前
                                      </div>
                                    </div>
                                    <div class="wrapper d-flex align-items-center justify-content-between py-2 border-bottom">
                                      <div class="d-flex">
                                        <img class="img-sm rounded-10" src="../assets/images/faces/face2.jpg" alt="profile">
                                        <div class="wrapper ms-3">
                                          <p class="ms-1 mb-1 fw-bold">Wayne Murphy</p>
                                          <small class="text-muted mb-0">162543</small>
                                        </div>
                                      </div>
                                      <div class="text-muted text-small">
                                        1小时前
                                      </div>
                                    </div>
                                    <div class="wrapper d-flex align-items-center justify-content-between pt-2">
                                      <div class="d-flex">
                                        <img class="img-sm rounded-10" src="../assets/images/faces/face3.jpg" alt="profile">
                                        <div class="wrapper ms-3">
                                          <p class="ms-1 mb-1 fw-bold">Katherine Butler</p>
                                          <small class="text-muted mb-0">162543</small>
                                        </div>
                                      </div>
                                      <div class="text-muted text-small">
                                        1小时前
                                      </div>
                                    </div>
                                    <div class="wrapper d-flex align-items-center justify-content-between py-2 border-bottom">
                                      <div class="d-flex">
                                        <img class="img-sm rounded-10" src="../assets/images/faces/face4.jpg" alt="profile">
                                        <div class="wrapper ms-3">
                                          <p class="ms-1 mb-1 fw-bold">Matthew Bailey</p>
                                          <small class="text-muted mb-0">162543</small>
                                        </div>
                                      </div>
                                      <div class="text-muted text-small">
                                        1小时前
                                      </div>
                                    </div>
                                    <div class="wrapper d-flex align-items-center justify-content-between pt-2">
                                      <div class="d-flex">
                                        <img class="img-sm rounded-10" src="../assets/images/faces/face5.jpg" alt="profile">
                                        <div class="wrapper ms-3">
                                          <p class="ms-1 mb-1 fw-bold">Rafell John</p>
                                          <small class="text-muted mb-0">Alaska, USA</small>
                                        </div>
                                      </div>
                                      <div class="text-muted text-small">
                                        1小时前
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>-->
                    </div>
                  </div>
                </div>
              <div id="user" class="home-tab" v-else-if="userData && userData.job === 0">
                <div class="d-sm-flex align-items-center justify-content-between border-bottom">
                  <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active ps-0" id="user-home-tab" data-bs-toggle="tab" href="#user-overview" role="tab" aria-controls="user-overview" aria-selected="true">用户中心</a>
                    </li>
                  </ul>
                  <div>
<!--                    <div class="btn-wrapper">
                      <a href="#" class="btn btn-primary text-white me-0" @click="handleClick">余额充值</a>
                    </div>-->
              </div>
            </div>
                <div class="tab-content tab-content-basic">
                  <div class="tab-pane fade show active" id="user-overview" role="tabpanel" aria-labelledby="user-overview">
                    <!-- 用户界面内容 -->
                    <div class="row mt-3">
                      <div class="col-md-6 grid-margin stretch-card">
                        <div class="card card-rounded">
                          <div class="card-body">
                            <h4 class="card-title">个人信息</h4>
                            <div class="user-info-wrapper mt-4">
                              <div class="d-flex align-items-center">
                                <img src="../assets/images/faces/face8.jpg" class="img-lg rounded-circle me-3" alt="用户头像">
                                <div>
                                  <h4 class="mb-1">{{userName}}</h4>
                                  <p class="text-muted mb-0">余额: ¥{{userData ? userData.balance || 0 : 0}}</p>
                                </div>
                              </div>
                              <div class="mt-4">
                                <div class="d-flex border-bottom pb-3 mb-3">
                                  <i class="mdi mdi-cellphone text-primary me-3 font-weight-bold" style="font-size: 1.5rem;"></i>
                                  <div class="text-info">
                                    <p class="mb-0 text-muted">手机号码</p>
                                    <h5>{{userData ? userData.phone || '未设置' : '未设置'}}</h5>
                                  </div>
                                </div>
                                <div class="d-flex border-bottom pb-3 mb-3">
                                  <i class="mdi mdi-account text-primary me-3 font-weight-bold" style="font-size: 1.5rem;"></i>
                                  <div class="text-info">
                                    <p class="mb-0 text-muted">用户ID</p>
                                    <h5>{{userData ? userData.number || '未知' : '未知'}}</h5>
                                  </div>
                                </div>
                                <div class="d-flex">
                                  <i class="mdi mdi-credit-card text-primary me-3 font-weight-bold" style="font-size: 1.5rem;"></i>
                                  <div class="text-info">
                                    <p class="mb-0 text-muted">身份证号</p>
                                    <h5>{{userData ? userData.id_number || '未设置' : '未设置'}}</h5>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-6 grid-margin stretch-card">
                        <div class="card card-rounded">
                          <div class="card-body">
                            <h4 class="card-title">快捷功能</h4>
                            <div class="quick-actions mt-4">
                              <div class="row g-3">
                                <div class="col-6">
                                  <button class="btn btn-primary w-100 py-3" @click="showEmbarkationModal = true">
                                    <i class="mdi mdi-desktop-mac-dashboard mb-2" style="font-size: 2rem;"></i>
                                    <div>上机</div>
                                  </button>
                                </div>
<!--                                <div class="col-6">
                                  <button class="btn btn-info w-100 py-3" @click="product">
                                    <i class="mdi mdi-cart mb-2" style="font-size: 2rem;"></i>
                                    <div>购物</div>
                                  </button>
                                </div>
                                <div class="col-6">
                                  <button class="btn btn-success w-100 py-3" @click="handleClick">
                                    <i class="mdi mdi-currency-usd mb-2" style="font-size: 2rem;"></i>
                                    <div>充值</div>
                                  </button>
                                </div>
                                <div class="col-6">
                                  <button class="btn btn-warning w-100 py-3" @click="showUserHistory">
                                    <i class="mdi mdi-history mb-2" style="font-size: 2rem;"></i>
                                    <div>历史记录</div>
                                  </button>
                                </div>-->
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="default" class="home-tab" v-else>
                <div class="d-sm-flex align-items-center justify-content-between border-bottom">
                  <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active ps-0" id="default-tab" data-bs-toggle="tab" href="#default-overview" role="tab" aria-controls="default-overview" aria-selected="true">欢迎</a>
                    </li>
                  </ul>
                </div>
                <div class="tab-content tab-content-basic">
                  <div class="tab-pane fade show active" id="default-overview" role="tabpanel" aria-labelledby="default-overview">
                    <div class="row mt-4">
                      <div class="col-12 text-center">
                        <div class="card card-rounded">
                          <div class="card-body py-5">
                            <i class="mdi mdi-account-alert text-warning mb-3" style="font-size: 4rem;"></i>
                            <h3>用户身份未识别</h3>
                            <p class="text-muted mt-3">您的账户可能未正确登录或权限信息缺失</p>
                            <div class="mt-4">
                              <button class="btn btn-primary me-2" @click="logout">重新登录</button>
                              <button class="btn btn-outline-secondary">联系管理员</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- content-wrapper结束 -->
      <!-- 部分:partials/_footer.html -->
<!--      <footer class="footer">
        <div class="d-sm-flex justify-content-center justify-content-sm-between">
          <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">版权所有 © 模板。保留所有权利。</span>
        </div>
      </footer>-->
      <!-- 部分 -->
    </div>
    <!-- main-panel 结束 -->
  </div>
  <!-- page-body-wrapper 结束 -->

  <!-- 用户资料弹窗 -->
  <div class="modal fade" id="userProfileModal" tabindex="-1" role="dialog" aria-labelledby="userProfileModalLabel">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title" id="userProfileModalLabel">
            <i class="mdi mdi-account-circle me-2"></i>用户资料
          </h5>
          <button type="button" class="btn-close btn-close-white" @click="closeUserModal" aria-label="Close"></button>
        </div>
        <div class="modal-body p-0">
          <div v-if="!userModalLoading">
            <!-- 用户基本信息 -->
            <div class="user-profile-header">
              <div class="profile-content">
                <div class="profile-image-wrapper">
                  <img :src="userModalData.avatar || '../assets/images/faces/face8.jpg'" class="profile-image" alt="用户头像">
                  <div class="profile-status" :class="userModalData.activate ? 'active' : 'inactive'">
                    <i class="mdi" :class="userModalData.activate ? 'mdi-check-circle' : 'mdi-close-circle'"></i>
                  </div>
                </div>
                <div class="profile-info">
                  <h4 class="mb-1">{{ userModalData.name || '未知用户' }}</h4>
                  <span class="badge" :class="userModalData.activate ? 'bg-success' : 'bg-danger'">
                    {{ userModalData.activate ? '已激活' : '未激活' }}
                  </span>
                </div>
              </div>
            </div>

            <!-- 用户详细信息 -->
            <div class="user-profile-details">
              <div class="info-group">
                <div class="info-item">
                  <i class="mdi mdi-cellphone text-primary"></i>
                  <div class="info-content">
                    <span class="info-label">手机号码</span>
                    <span class="info-value">{{ userModalData.phone || '未设置' }}</span>
                  </div>
                </div>
                <div class="info-item">
                  <i class="mdi mdi-numeric text-info"></i>
                  <div class="info-content">
                    <span class="info-label">用户ID</span>
                    <span class="info-value">{{ userModalData.number || '未知' }}</span>
                  </div>
                </div>
                <div class="info-item">
                  <i class="mdi mdi-cake text-warning"></i>
                  <div class="info-content">
                    <span class="info-label">年龄</span>
                    <span class="info-value">{{ userModalData.age || '未设置' }}</span>
                  </div>
                </div>
                <div class="info-item">
                  <i class="mdi mdi-credit-card text-info"></i>
                  <div class="info-content">
                    <span class="info-label">身份证号</span>
                    <span class="info-value">{{ userModalData.id_number || '未设置' }}</span>
                  </div>
                </div>
                <div class="info-item">
                  <i class="mdi mdi-currency-cny text-success"></i>
                  <div class="info-content">
                    <span class="info-label">账户余额</span>
                    <span class="info-value fw-bold">{{ userModalData.balance || '0' }} 元</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 用户操作区 -->
            <div class="user-profile-actions p-3 bg-light">
              <div class="row g-2">
                <div class="col-6">
                  <button class="btn btn-outline-primary w-100">
                    <i class="mdi mdi-account-edit me-1"></i>编辑资料
                  </button>
          </div>
                <div class="col-6">
                  <button class="btn btn-outline-success w-100">
                    <i class="mdi mdi-currency-usd me-1"></i>充值
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-3 text-muted mb-0">正在加载用户数据...</p>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @click="closeUserModal">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 美化的提示弹窗 -->
  <div class="position-fixed bottom-0 right-0 p-3" style="z-index: 9999; right: 0; bottom: 0;">
    <div id="customToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="4000">
      <div class="toast-header">
        <strong class="mr-auto" id="toastTitle">提示</strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body" id="toastMessage">
      </div>
    </div>
  </div>

  <!-- 通知组件 -->
  <div class="notification-container" v-if="notification.show">
    <div class="notification" :class="notification.type">
      <div class="notification-content">
        <i class="el-icon-warning" v-if="notification.type === 'warning'"></i>
        <i class="el-icon-error" v-if="notification.type === 'error'"></i>
        <i class="el-icon-success" v-if="notification.type === 'success'"></i>
        <span v-html="notification.message"></span>
      </div>
      <button class="close-btn" @click="hideNotification">
        <i class="el-icon-close"></i>
      </button>
    </div>
  </div>

  <!-- 上机弹窗 -->
  <embarkationComponent v-if="showEmbarkationModal" @close="closeEmbarkationModal"></embarkationComponent>

  <!-- 添加创建用户的弹窗组件 -->
  <div class="modal fade" id="createUserModal" tabindex="-1" aria-labelledby="createUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title" id="createUserModalLabel">
            <i class="mdi mdi-account-plus me-2"></i>创建新用户
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body py-4">
          <form @submit.prevent="submitCreateUser">
            <!-- 加载提示 -->
            <div v-if="createUserLoading" class="text-center py-4">
              <div class="spinner-container">
                <div class="spinner-wrapper">
                  <div class="spinner-circle"></div>
                  <div class="spinner-dot"></div>
                </div>
                <p class="mt-3 text-primary">正在创建用户，请稍候...</p>
              </div>
            </div>
            
            <div v-else>
              <!-- 表单字段 -->
              <div class="form-group mb-3">
                <input 
                  type="text" 
                  class="form-control form-control-lg" 
                  id="createUserName" 
                  placeholder="用户姓名"
                  v-model="createUserForm.name" 
                  :class="{'is-invalid': formErrors.name}"
                  required
                >
                <small v-if="formErrors.name" class="text-danger" style="font-size: 0.8rem;">{{ formErrors.name }}</small>
              </div>
              
              <div class="form-group mb-3">
                <input 
                  type="text" 
                  class="form-control form-control-lg" 
                  id="createUserPhone" 
                  placeholder="手机号码"
                  v-model="createUserForm.phone" 
                  :class="{'is-invalid': formErrors.phone}"
                  @input="validatePhone"
                  required
                >
                <small v-if="formErrors.phone" class="text-danger" style="font-size: 0.8rem;">{{ formErrors.phone }}</small>
              </div>
              
              <div class="form-group mb-3">
                <input 
                  type="text" 
                  class="form-control form-control-lg" 
                  id="createUserIdNumber" 
                  placeholder="身份证号"
                  v-model="createUserForm.id_number" 
                  :class="{'is-invalid': formErrors.id_number}"
                  @input="validateIdNumber"
                  required
                >
                <small v-if="formErrors.id_number" class="text-danger" style="font-size: 0.8rem;">{{ formErrors.id_number }}</small>
              </div>
              
              <div class="form-group mb-3">
                <div class="input-group">
                  <span class="input-group-text">¥</span>
                  <input 
                    type="number" 
                    class="form-control form-control-lg" 
                    id="createUserBalance" 
                    placeholder="初始余额"
                    v-model="createUserForm.balance" 
                    :class="{'is-invalid': formErrors.balance}"
                    min="0"
                    step="0.01"
                  >
                </div>
                <small v-if="formErrors.balance" class="text-danger" style="font-size: 0.8rem;">{{ formErrors.balance }}</small>
              </div>
              
              <div class="form-group mb-3">
                <div class="input-group" style="position: relative;">
                  <input 
                    :type="showPassword ? 'text' : 'password'" 
                    class="form-control form-control-lg" 
                    id="createUserPassword" 
                    placeholder="密码"
                    v-model="createUserForm.cipher" 
                    :class="{'is-invalid': formErrors.cipher}"
                    required
                    style="background-color: transparent;"
                  >
                  <div class="input-group-append" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; z-index: 3; cursor: pointer;">
                    <span style="cursor: pointer; display: block; position: relative;" @click="togglePasswordVisibility">
                      <i v-if="showPassword" class="mdi mdi-eye-off" style="color: #000;"></i>
                      <i v-else class="mdi mdi-eye" style="color: #000;"></i>
                    </span>
                  </div>
                </div>
                <small v-if="formErrors.cipher" class="text-danger" style="font-size: 0.8rem;">{{ formErrors.cipher }}</small>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button 
            type="button" 
            class="btn btn-primary btn-lg font-weight-medium" 
            @click="submitCreateUser" 
            :disabled="createUserLoading"
          >
            创建用户
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加结果提示弹窗 -->
  <div class="modal fade custom-modal" id="createUserResultModal" tabindex="-1" role="dialog" aria-labelledby="createUserResultModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header border-0" :class="createUserSuccess ? 'bg-success' : 'bg-warning'">
          <h5 class="modal-title text-white" id="createUserResultModalLabel">
            <i :class="createUserSuccess ? 'mdi mdi-check-circle' : 'mdi mdi-alert-circle'" class="mr-2"></i>
            {{ createUserSuccess ? '创建成功' : '创建失败' }}
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body py-5">
          <div class="text-center">
            <div class="icon-container mb-4" :class="createUserSuccess ? 'success-icon' : 'error-icon'">
              <i :class="createUserSuccess ? 'mdi mdi-check-circle-outline' : 'mdi mdi-close-circle-outline'"></i>
            </div>
            <h4 class="result-heading mb-3">{{ createUserSuccess ? '用户创建成功！' : '创建失败' }}</h4>
            <p class="text-muted">{{ createUserResultMessage }}</p>
          </div>
        </div>
        <div class="modal-footer border-0 d-flex justify-content-center">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button v-if="!createUserSuccess" type="button" class="btn btn-theme" @click="resetCreateUserForm">
            <i class="mdi mdi-reload me-1"></i>重试
          </button>
          <button v-if="createUserSuccess" type="button" class="btn btn-theme" data-bs-dismiss="modal">
            继续
            <i class="mdi mdi-arrow-right ms-1"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 用户充值模态框 -->
  <div class="modal fade" id="rechargeModal" tabindex="-1" aria-labelledby="rechargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title" id="rechargeModalLabel">
            <i class="mdi mdi-currency-usd me-2"></i>用户充值
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div v-if="rechargeLoading" class="d-flex justify-content-center my-5">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <form v-else @submit.prevent="submitRecharge">
            <!-- 用户搜索区域 -->
            <div class="form-group mb-4">
              <label for="userSearch" class="form-label">查找用户</label>
              <div class="input-group">
                <input 
                  type="text" 
                  class="form-control form-control-lg" 
                  id="userSearch" 
                  v-model="rechargeForm.searchTerm"
                  placeholder="输入用户ID或手机号码，按回车搜索"
                  @keyup.enter="searchUser"
                >
                <button class="btn btn-primary" type="button" @click="searchUser">
                  <i class="mdi mdi-magnify me-1"></i>搜索
                </button>
              </div>
              <small class="text-muted mt-1">提示：输入内容后按回车键或点击搜索按钮</small>
              <!-- 搜索结果 -->
              <div v-if="userSearchResults.length > 0" class="search-results mt-2">
                <div class="list-group shadow-sm">
                  <button 
                    v-for="user in userSearchResults" 
                    :key="user.number" 
                    type="button"
                    class="list-group-item list-group-item-action"
                    @click="selectUserForRecharge(user)"
                  >
                    <div class="d-flex justify-content-between align-items-center">
                      <div>
                        <strong>{{ user.name }}</strong>
                        <small class="text-muted ms-2">ID: {{ user.number }}</small>
                      </div>
                      <small>余额: {{ user.balance || 0 }}元</small>
                    </div>
                    <small class="text-muted">{{ user.phone }}</small>
                  </button>
                </div>
              </div>
              <div v-else-if="rechargeForm.searchTerm && hasSearched" class="alert alert-warning mt-2">
                未找到匹配的用户
              </div>
            </div>

            <!-- 选中的用户信息 -->
            <div v-if="selectedUser" class="card mb-4 border-primary">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                  <h6 class="card-title mb-0">已选择用户</h6>
                  <button type="button" class="btn-close" @click="clearSelectedUser"></button>
                </div>
                <div class="row g-2">
                  <div class="col-md-6">
                    <p class="mb-1"><strong>用户名:</strong> {{ selectedUser.name }}</p>
                    <p class="mb-1"><strong>ID:</strong> {{ selectedUser.number }}</p>
                  </div>
                  <div class="col-md-6">
                    <p class="mb-1"><strong>手机号:</strong> {{ selectedUser.phone }}</p>
                    <p class="mb-1"><strong>当前余额:</strong> {{ selectedUser.balance || 0 }}元</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 充值金额 -->
            <div class="form-group mb-3">
              <label for="rechargeAmount" class="form-label fw-bold">充值金额</label>
              <div class="input-group">
                <span class="input-group-text">¥</span>
                <input 
                  type="number" 
                  class="form-control form-control-lg" 
                  id="rechargeAmount" 
                  v-model="rechargeForm.amount"
                  placeholder="请输入充值金额" 
                  min="1" 
                  step="0.01"
                  required
                  :disabled="!selectedUser"
                >
              </div>
              <div v-if="rechargeErrors.amount" class="text-danger mt-1">
                {{ rechargeErrors.amount }}
              </div>

              <!-- 快速金额选择 -->
              <div class="quick-amounts mt-3">
                <label class="form-label">快速选择金额</label>
                <div class="btn-group w-100">
                  <button 
                    v-for="amount in [50, 100, 200, 500]" 
                    :key="amount"
                    type="button" 
                    class="btn btn-outline-primary" 
                    @click="selectAmount(amount)"
                    :disabled="!selectedUser"
                  >
                    {{ amount }}元
                  </button>
                </div>
                <div class="custom-amount mt-2">
                  <div class="input-group">
                    <input 
                      type="number" 
                      class="form-control" 
                      placeholder="自定义金额" 
                      v-model="customAmount"
                      min="1" 
                      step="0.01"
                      :disabled="!selectedUser"
                    >
                    <button 
                      class="btn btn-outline-success" 
                      type="button" 
                      @click="applyCustomAmount"
                      :disabled="!selectedUser || !customAmount"
                    >
                      应用
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 备注信息 -->
            <div class="form-group mb-4">
              <label for="rechargeNote" class="form-label">备注</label>
              <textarea 
                class="form-control" 
                id="rechargeNote" 
                v-model="rechargeForm.text"
                placeholder="可选备注信息" 
                rows="2"
                :disabled="!selectedUser"
              ></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
          <button 
            type="button" 
            class="btn btn-primary" 
            @click="submitRecharge" 
            :disabled="!canSubmitRecharge || rechargeLoading"
          >
            <span v-if="rechargeLoading" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
            {{ rechargeLoading ? '处理中...' : '确认充值' }}
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 充值结果模态框 -->
  <div class="modal fade" id="rechargeResultModal" tabindex="-1" aria-labelledby="rechargeResultModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header" :class="rechargeSuccess ? 'bg-success' : 'bg-danger'">
          <h5 class="modal-title text-white" id="rechargeResultModalLabel">
            <i :class="rechargeSuccess ? 'mdi mdi-check-circle' : 'mdi mdi-alert-circle'" class="me-2"></i>
            {{ rechargeSuccess ? '充值成功' : '充值失败' }}
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body text-center py-4">
          <div :class="rechargeSuccess ? 'text-success' : 'text-danger'" style="font-size: 4rem;">
            <i :class="rechargeSuccess ? 'mdi mdi-check-circle-outline' : 'mdi mdi-close-circle-outline'"></i>
          </div>
          <h4 class="mt-2">{{ rechargeSuccess ? '充值操作已完成' : '充值操作失败' }}</h4>
          <p v-if="rechargeSuccess" class="text-muted mt-2">
            已成功为用户 <strong>{{ selectedUser ? selectedUser.name : '' }}</strong> 充值 <strong>{{ rechargeForm.amount }}元</strong>
          </p>
          <p v-if="rechargeSuccess" class="mt-2">
            <span class="badge bg-info">新余额: {{ newBalance }}元</span>
          </p>
          <p v-if="!rechargeSuccess" class="text-danger mt-2">
            {{ rechargeErrorMessage || '系统处理请求时遇到问题，请稍后重试' }}
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button v-if="rechargeSuccess" type="button" class="btn btn-primary" @click="startNewRecharge">继续充值</button>
        </div>
      </div>
    </div>
  </div>
</template>

<!--定义组件：逻辑、方法、数据等-->
<script>
// 在组件脚本顶部引入必要的库
import { ref, onMounted } from 'vue';
import axios from "axios";
import { layoutApi } from '../utils/js/api';
// 引入上机组件
import embarkationComponent from '../embarkation/embarkation.vue';

// 引入全局弹窗方法
const { showSwal } = window;

export default {
  name: "Index",
  
  // 注册组件
  components: {
    embarkationComponent
  },
  
  // 组件数据
  data() {
    return {
      // 初始化统计数据为空对象
      statisticsdata: {},
      // 初始化用户数据为空对象
      user:{},
      // 用于保存是否已加载脚本的状态
      scriptsLoaded: {
        base: false,
        secondary: false,
        dashboard: false
      },
      // 添加用户模态框相关数据
      userModalData: {},
      userModalLoading: false,
      
      // 创建用户相关数据
      createUserForm: {
        name: '',
        phone: '',
        id_number: '',
        balance: 0,
        cipher: ''
      },
      formErrors: {
        name: '',
        phone: '',
        id_number: '',
        balance: '',
        cipher: ''
      },
      createUserLoading: false,
      showPassword: false,
      
      // 添加创建用户结果相关变量
      createUserSuccess: false,
      createUserResultMessage: '',
      
      // 用于显示提示消息
      toastConfig: {
        title: '提示',
        message: '',
        type: 'info' // 可选: info, success, warning, danger
      },
      // 添加标记来控制事件绑定状态
      eventsInitialized: false,
      // 添加UI状态控制
      uiInitialized: false,
      // 添加加载状态
      isLoading: true,
      // 添加通知相关状态
      notification: {
        show: false,
        message: '',
        type: 'error', // success, warning, error
        timeout: null
      },
      apiTimeoutDuration: 10000, // 10秒API超时时间
      // 添加上机弹窗状态控制
      showEmbarkationModal: false,
      // 用户充值相关数据
      rechargeForm: {
        searchTerm: '',
        amount: 0,
        text: ''
      },
      rechargeErrors: {
        amount: ''
      },
      rechargeLoading: false,
      rechargeSuccess: false,
      rechargeErrorMessage: '',
      newBalance: 0,
      selectedUser: null,
      userSearchResults: [],
      hasSearched: false,
      canSubmitRecharge: false,
      customAmount: null,
    }
  },

  // 使用组合式API定义响应式状态和生命周期钩子
  setup() {
    // 定义响应式变量
    const greeting = ref(''); // 问候语
    const userData = ref(null); // 用户数据
    const userName = ref('人'); // 默认用户名，防止数据未加载时显示空白
    const isAdmin = ref(false); // 是否为管理员

    /**
     * 根据当前时间获取问候语
     * @returns {string} 根据时间段返回相应的问候语
     */
    function getGreeting() {
      const hour = new Date().getHours();
      if (hour >= 0 && hour < 5) return '凌晨了';
      else if (hour >= 5 && hour < 9) return '早上好';
      else if (hour >= 9 && hour < 12) return '上午好';
      else if (hour >= 12 && hour < 14) return '中午好';
      else if (hour >= 14 && hour < 18) return '下午好';
      else if (hour >= 18 && hour < 21) return '晚上好';
      else return '深夜了';
    }

    /**
     * Base64解码函数
     * @param {string} str Base64编码的字符串
     * @returns {string} 解码后的字符串
     */
    function decodeBase64(str) {
      try {
        // 检查是否是有效的Base64字符串
        if (!str || typeof str !== 'string' || str === '未设置' || str === '未知') {
          return str;
        }
        
        // 检查是否符合Base64编码特征(只包含A-Z, a-z, 0-9, +, /, =)
        const base64Regex = /^[A-Za-z0-9+/=]+$/;
        if (!base64Regex.test(str)) {
          return str; // 非Base64编码，直接返回
        }
        
        // 解码Base64字符串
        return atob(str);
      } catch (error) {
        console.error('Base64解码失败:', error);
        return str; // 出错时返回原字符串
      }
    }

    // 组件挂载后执行的函数
    onMounted(() => {
      // 设置问候语
      greeting.value = getGreeting();
      
      // 从localStorage读取用户信息
      try {
        const userInfoStr = localStorage.getItem('userInfo');
        if (userInfoStr) {
          userData.value = JSON.parse(userInfoStr);
          
          // 解码可能是Base64编码的字段
          if (userData.value) {
            // 解码手机号
            if (userData.value.phone) {
              userData.value.phone = decodeBase64(userData.value.phone);
            }
            
            // 解码身份证号
            if (userData.value.id_number) {
              userData.value.id_number = decodeBase64(userData.value.id_number);
            }
            
          // 如果有用户名，则更新显示
            if (userData.value.name) {
            userName.value = userData.value.name;
            }
            
            // 设置管理员状态
            isAdmin.value = userData.value.job === 1;
            
            console.log('用户数据:', userData.value);
            console.log('用户角色: ', userData.value.job === 1 ? '管理员' : '普通用户');
            console.log('是否管理员:', isAdmin.value);
          }
        }
      } catch (error) {
        console.error('读取用户信息失败:', error);
      }
    });

    // 返回响应式状态，使其可在模板中使用
    return { 
      greeting, 
      userData, 
      userName,
      isAdmin
    };
  },
  
  // 组件方法
  methods: {
    /**
     * 解码Base64编码的字符串
     * @param {string} str Base64编码的字符串
     * @returns {string} 解码后的字符串
     */
    decodeBase64(str) {
      try {
        // 检查是否是有效的Base64字符串
        if (!str || typeof str !== 'string' || str === '未设置' || str === '未知') {
          return str;
        }
        
        // 检查是否符合Base64编码特征(只包含A-Z, a-z, 0-9, +, /, =)
        const base64Regex = /^[A-Za-z0-9+/=]+$/;
        if (!base64Regex.test(str)) {
          return str; // 非Base64编码，直接返回
        }
        
        // 解码Base64字符串
        return atob(str);
      } catch (error) {
        console.error('Base64解码失败:', error);
        return str; // 出错时返回原字符串
      }
    },
    
    /**
     * 切换密码可见性
     */
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
      console.log('密码可见性切换为:', this.showPassword ? '显示' : '隐藏');
      
      // 获取密码输入框元素并切换类型
      const passwordInput = document.querySelector('#createUserPassword');
      if (passwordInput) {
        passwordInput.type = this.showPassword ? 'text' : 'password';
        console.log('密码输入框类型已切换为:', passwordInput.type);
      } else {
        console.error('未找到密码输入框元素');
      }
    },
    
    /**
     * 显示创建用户弹窗
     */
    showCreateUserModal() {
      // 初始化创建用户表单
      this.resetCreateUserForm();
      
      // 显示模态框
      const modal = document.getElementById('createUserModal');
      if (modal) {
        const bsModal = new bootstrap.Modal(modal);
        bsModal.show();
      }
    },
    
    /**
     * 重置创建用户表单
     */
    resetCreateUserForm() {
      this.createUserForm = {
        name: '',
        phone: '',
        id_number: '',
        balance: 0,
        cipher: '123456'  // 设置默认密码
      };
      
      this.formErrors = {
        name: '',
        phone: '',
        id_number: '',
        balance: '',
        cipher: ''
      };
      
      this.createUserLoading = false;
      this.showPassword = false;
    },
    
    /**
     * 验证手机号格式
     */
    validatePhone() {
      // 去除所有非数字字符
      this.createUserForm.phone = this.createUserForm.phone.replace(/[^0-9]/g, '');
      // 去除所有空格
      this.createUserForm.phone = this.createUserForm.phone.replace(/\s+/g, '');
      // 限制最大长度为11位
      if (this.createUserForm.phone.length > 11) {
        this.createUserForm.phone = this.createUserForm.phone.slice(0, 11);
      }
      // 验证手机号码格式
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!this.createUserForm.phone) {
        this.formErrors.phone = '请输入手机号码';
      } else if (!phoneRegex.test(this.createUserForm.phone)) {
        this.formErrors.phone = '请输入有效的11位手机号码';
      } else {
        this.formErrors.phone = '';
      }
    },
    
    /**
     * 验证身份证号格式
     */
    validateIdNumber() {
      const idRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!this.createUserForm.id_number) {
        this.formErrors.id_number = '请输入身份证号';
      } else if (!idRegex.test(this.createUserForm.id_number)) {
        this.formErrors.id_number = '请输入有效的15或18位身份证号';
      } else {
        // 基本格式正确，检查年龄
        const age = this.getAgeFromIdNumber(this.createUserForm.id_number);
        if (age < 18) {
          this.formErrors.id_number = '用户未满18岁，不能创建账号';
        } else if (age > 100) {
          this.formErrors.id_number = '身份证号年龄计算错误，请检查输入';
        } else {
          this.formErrors.id_number = '';
        }
      }
    },
    
    /**
     * 检查表单是否有效（简化判断逻辑，只验证必填项是否有值）
     */
    isFormValid() {
      // 验证必填字段
      let valid = true;
      
      // 验证用户名
      if (!this.createUserForm.name || this.createUserForm.name.trim() === '') {
        this.formErrors.name = '请输入用户姓名';
        valid = false;
      } else {
        this.formErrors.name = '';
      }
      
      // 验证手机号
      if (!this.createUserForm.phone) {
        this.formErrors.phone = '请输入手机号码';
        valid = false;
      } else if (!/^1[3-9]\d{9}$/.test(this.createUserForm.phone)) {
        this.formErrors.phone = '请输入有效的11位手机号码';
        valid = false;
      }
      
      // 验证身份证号
      if (!this.createUserForm.id_number) {
        this.formErrors.id_number = '请输入身份证号';
        valid = false;
      } else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.createUserForm.id_number)) {
        this.formErrors.id_number = '请输入有效的15或18位身份证号';
        valid = false;
      }
      
      // 验证密码
      if (!this.createUserForm.cipher || this.createUserForm.cipher.trim() === '') {
        this.formErrors.cipher = '请输入密码';
        valid = false;
      } else if (this.createUserForm.cipher.length < 6) {
        this.formErrors.cipher = '密码长度至少为6位';
        valid = false;
      } else {
        this.formErrors.cipher = '';
      }
      
      // 验证余额格式
      if (this.createUserForm.balance < 0) {
        this.formErrors.balance = '初始余额不能为负数';
        valid = false;
      } else {
        this.formErrors.balance = '';
      }
      
      return valid;
    },
    
    /**
     * 从身份证号中提取年龄
     * @param {string} idNumber 身份证号
     * @returns {number} 年龄
     */
    getAgeFromIdNumber(idNumber) {
      try {
        let birthDate;
        
        // 清理身份证号（移除空格和其他非法字符）
        idNumber = idNumber.replace(/[^\dXx]/g, '');
        
        if (idNumber.length === 18) {
          // 处理18位身份证
          const year = idNumber.substring(6, 10);
          const month = idNumber.substring(10, 12);
          const day = idNumber.substring(12, 14);
          birthDate = new Date(`${year}-${month}-${day}`);
        } else if (idNumber.length === 15) {
          // 处理15位身份证，15位身份证年份是19XX
          const year = '19' + idNumber.substring(6, 8);
          const month = idNumber.substring(8, 10);
          const day = idNumber.substring(10, 12);
          birthDate = new Date(`${year}-${month}-${day}`);
        } else {
          console.error('无效的身份证号码格式');
          return 0;
        }
        
        // 计算年龄
        const today = new Date();
        let age = today.getFullYear() - birthDate.getFullYear();
        const monthDiff = today.getMonth() - birthDate.getMonth();
        
        // 如果今年还没过生日，年龄减1
        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
          age--;
        }
        
        return age;
      } catch (error) {
        console.error('计算年龄时出错:', error);
        return 0;
      }
    },
    
    /**
     * 验证身份证号是否满18岁
     * @returns {boolean} 是否满18岁
     */
    validateAge() {
      if (!this.createUserForm.id_number) {
        return false;
      }
      
      const age = this.getAgeFromIdNumber(this.createUserForm.id_number);
      
      if (age < 18) {
        this.formErrors.id_number = '用户未满18岁，不能创建账号';
        return false;
      }
      
      return true;
    },
    
    /**
     * 提交创建用户表单
     */
    submitCreateUser() {
      // 表单验证
      this.validatePhone();
      this.validateIdNumber();
      
      // 检查表单是否有错误
      if (
        this.formErrors.name || 
        this.formErrors.phone || 
        this.formErrors.id_number || 
        this.formErrors.balance || 
        this.formErrors.cipher ||
        !this.createUserForm.name || 
        !this.createUserForm.phone || 
        !this.createUserForm.id_number
      ) {
        this.showNotification('请填写完整并正确的表单信息', 'error');
        return;
      }
      
      // 验证年龄是否满18岁
      if (!this.validateAge()) {
        this.showNotification('创建失败：用户未满18岁，根据网络安全法规定不能创建账号', 'error');
        
        // 显示未成年创建失败的结果
        this.createUserSuccess = false;
        this.createUserResultMessage = '用户未满18岁，根据网络安全法规定不能创建账号';
        this.showCreateUserResult();
        return;
      }
      
      // 设置加载状态
      this.createUserLoading = true;
      
      // 准备请求参数 - 使用FormData或URLSearchParams格式
      const params = new URLSearchParams();
      params.append('name', this.createUserForm.name);
      params.append('phone', this.createUserForm.phone);
      params.append('id_number', this.createUserForm.id_number);
      params.append('cipher', this.createUserForm.cipher);
      params.append('balance', this.createUserForm.balance);
      
      // 发送创建用户请求 - 使用正确的API路径
      axios.post('/api/user/createUser', params, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
        .then(response => {
          // 请求成功
          this.createUserLoading = false;
          this.createUserSuccess = true;
          this.createUserResultMessage = '用户创建成功！';
          
          // 显示成功通知
          this.showNotification('用户创建成功!', 'success');
          
          // 关闭创建用户模态框
          const modal = document.getElementById('createUserModal');
          if (modal) {
            const bsModal = bootstrap.Modal.getInstance(modal);
            if (bsModal) {
              bsModal.hide();
            }
          }
          
          // 显示结果弹窗
          this.showCreateUserResult();
          
          // 清空表单
          this.resetCreateUserForm();
          
          // 刷新数据
          this.loadStatisticsData();
        })
        .catch(error => {
          // 请求失败
          this.createUserLoading = false;
          this.createUserSuccess = false;
          
          // 获取错误信息
          let errorMsg = '创建用户失败';
          if (error.response) {
            if (error.response.data === "用户已存在") {
              errorMsg = `手机号 ${this.createUserForm.phone} 已被注册，请使用其他手机号`;
            } else {
              errorMsg = `服务器错误: ${error.response.status}`;
            }
          } else if (error.request) {
            errorMsg = '网络错误，无法连接到服务器';
          } else {
            errorMsg = `请求错误: ${error.message}`;
          }
          
          this.createUserResultMessage = errorMsg;
          
          // 显示错误通知
          this.showNotification(errorMsg, 'error');
          
          // 显示结果弹窗
          this.showCreateUserResult();
        });
    },
    
    /**
     * 显示通知消息
     * @param {string} message 消息内容
     * @param {string} type 消息类型 (success, warning, error)
     * @param {number} duration 显示时长 (默认4000毫秒)
     */
    showNotification(message, type = 'info', duration = 4000) {
      // 清除可能存在的旧定时器
      if (this.notification.timeout) {
        clearTimeout(this.notification.timeout);
      }
      
      // 设置通知
      this.notification.message = message;
      this.notification.type = type;
      this.notification.show = true;
      
      // 设置定时器自动关闭通知
      this.notification.timeout = setTimeout(() => {
        this.hideNotification();
      }, duration);
    },
    
    /**
     * 隐藏通知
     */
    hideNotification() {
      this.notification.show = false;
      if (this.notification.timeout) {
        clearTimeout(this.notification.timeout);
        this.notification.timeout = null;
      }
    },
    
    /**
     * 导航到设备管理页面
     */
    equipment() {
      this.$router.push('/status');
    },
    
    /**
     * 导航到购物商品
     */
    product(){
      this.$router.push('/shop');
    },
    embarkation(){
      this.showEmbarkationModal = true;
    },
    
    /**
     * 成功提示弹窗
     */
    showSuccess() {
        alert('操作成功！');
    },
    
    /**
     * 确认操作弹窗
     */
    confirmAction() {
      if (typeof showSwal === 'function') {
        showSwal('warning-message-and-confirmation');
      } else {
        console.warn('showSwal函数未定义，可能是相关脚本未加载');
        if (confirm('确定要执行此操作吗？')) {
          alert('操作已确认！');
        }
      }
    },
    
    /**
     * 自定义弹窗
     */
    customAlert() {
      if (typeof showSwal === 'function') {
        showSwal('custom-html-message');
      } else {
        console.warn('showSwal函数未定义，可能是相关脚本未加载');
        alert('这是一个自定义消息！');
      }
    },
    
    /**
     * 显示导出成功消息
     */
    handleClick() {
      this.showSuccess();
    },
    
    /**
     * 关闭用户资料弹窗
     */
    closeUserModal() {
      const modal = document.getElementById('userProfileModal');
      if (modal) {
        const bsModal = bootstrap.Modal.getInstance(modal);
        if (bsModal) {
          bsModal.hide();
          // 手动移除模态框背景
          const backdrop = document.querySelector('.modal-backdrop');
          if (backdrop) {
            backdrop.remove();
          }
          // 移除body上的modal-open类
          document.body.classList.remove('modal-open');
          // 恢复body的padding
          document.body.style.paddingRight = '';
        }
      }
    },
    
    /**
     * 显示用户详细信息
     */
    showUserInfo() {
      // 显示加载状态
      this.userModalLoading = true;
      
      // 从localStorage获取用户信息
      try {
        const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
        if (!userInfo || Object.keys(userInfo).length === 0) {
          this.showToast('用户信息', '无法获取用户信息，请重新登录', 'warning');
          return;
        }
        
        // 设置模态框数据，移除职位信息
        const { position, ...userDataWithoutPosition } = userInfo;
        this.userModalData = userDataWithoutPosition;
        
        // 解码可能是Base64编码的字段
        if (this.userModalData.phone) {
          this.userModalData.phone = this.decodeBase64(this.userModalData.phone);
        }
        
        if (this.userModalData.id_number) {
          this.userModalData.id_number = this.decodeBase64(this.userModalData.id_number);
        }
        
        console.log('用户详细信息:', this.userModalData);
        
        // 使用Bootstrap模态框显示用户信息
        const modal = document.getElementById('userProfileModal');
        if (modal) {
          const bsModal = new bootstrap.Modal(modal);
          bsModal.show();
          
          // 延迟关闭加载状态以创建平滑过渡
          setTimeout(() => {
            this.userModalLoading = false;
          }, 300);
        }
      } catch (error) {
        console.error('处理用户信息时出错:', error);
        this.showToast('错误', '解析用户数据时出错', 'danger');
        this.userModalLoading = false;
      }
    },
    
    /**
     * 初始化事件监听器
     * 确保所有UI元素的事件正确绑定
     */
    initEventListeners() {
      // 防止重复初始化
      if (this.eventsInitialized) return;
      
      try {
        // 为顶部导航栏的用户头像绑定事件
        const profileLinks = document.querySelectorAll('.nav-profile');
        profileLinks.forEach(link => {
          link.addEventListener('click', (e) => {
            e.preventDefault();
            this.showUserInfo();
          });
        });
        
        // 为侧边栏按钮绑定事件
        const sidebarLinks = document.querySelectorAll('.sidebar .nav-link');
        sidebarLinks.forEach(link => {
          link.addEventListener('click', function() {
            // 某些侧边栏链接可能需要特殊处理
            if (!link.hasAttribute('data-bs-toggle')) {
              // 如果是非下拉菜单项，可以直接处理点击
              console.log('侧边栏链接被点击:', link.textContent);
            }
          });
        });
        
        console.log('事件监听器初始化完成');
        this.eventsInitialized = true;
      } catch (error) {
        console.error('初始化事件监听器失败:', error);
      }
    },
    
    /**
     * 重新初始化界面元素
     * 确保所有依赖jQuery的UI组件正确初始化
     */
    reinitializeUI() {
      // 防止重复初始化
      if (this.uiInitialized) return;
      
      try {
        // 确保jQuery和Bootstrap加载完成
        if (typeof $ === 'undefined' || typeof $.fn.tooltip === 'undefined') {
          console.warn('jQuery或Bootstrap未加载，UI初始化延迟');
          setTimeout(() => this.reinitializeUI(), 500);
          return;
        }
        
        // 初始化工具提示
        $('[data-toggle="tooltip"]').tooltip();
        
        // 初始化下拉菜单
        $('.dropdown-toggle').dropdown();
        
        // 初始化模态框
        $('.modal').modal({
          show: false
        });
        
        // 初始化轮播
        $('.carousel').carousel();
        
        // 标记UI已初始化
        this.uiInitialized = true;
        console.log('UI组件初始化完成');
      } catch (error) {
        console.error('初始化UI组件失败:', error);
      }
    },
    
    /**
     * 加载并初始化图表
     */
    initializeCharts() {
      // 检查Chart.js是否已加载
      if (typeof Chart === 'undefined') {
        console.warn('Chart.js未加载，图表初始化延迟');
        // 延迟尝试初始化图表
        setTimeout(() => this.initializeCharts(), 500);
        return;
      }
      
      try {
        // 初始化性能折线图
        const performanceChart = document.getElementById('performanceChart');
        if (performanceChart) {
          new Chart(performanceChart, {
            type: 'line',
            data: {
              labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
              datasets: [{
                label: '性能',
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: false,
                borderColor: 'rgb(75, 73, 172)',
                tension: 0.1
              }]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false
            }
          });
        }
        
        // 初始化市场概述图表
        const marketChart = document.getElementById('marketChart');
        if (marketChart) {
          new Chart(marketChart, {
            type: 'doughnut',
            data: {
              labels: ['直接', '社交媒体', '推荐', '其他'],
              datasets: [{
                data: [30, 40, 20, 10],
                backgroundColor: [
                  'rgba(75, 73, 172, 0.7)',
                  'rgba(75, 192, 192, 0.7)',
                  'rgba(255, 205, 86, 0.7)',
                  'rgba(201, 203, 207, 0.7)'
                ]
              }]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false
            }
          });
        }
        
        console.log('图表初始化完成');
      } catch (error) {
        console.error('初始化图表失败:', error);
      }
    },
    
    /**
     * 加载所有必要的脚本并初始化UI
     */
    async initializeApplication() {
      this.isLoading = true;
      
      try {
        // 预加载关键CSS
        await this.preloadStyles();
        
        // 确保基础脚本已加载
        await this.loadScriptsSequentially([
          '/src/assets/vendors/js/vendor-bundle-base.js'
        ]);
        this.scriptsLoaded.base = true;
        console.log('基础库加载完成');
        
        // 加载UI框架和插件
        await this.loadScriptsSequentially([
          '/src/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js',
          '/src/assets/vendors/chart.js/Chart.min.js',
          '/src/assets/vendors/progressbar.js/progressbar.min.js'
        ]);
        this.scriptsLoaded.secondary = true;
        console.log('插件脚本加载完成');
        
        // 加载应用功能脚本
        await this.loadScriptsSequentially([
          '/src/utils/js/off-canvas.js',
          '/src/utils/js/hoverable-collapse.js',
          '/src/utils/js/template.js',
          '/src/utils/js/settings.js',
          '/src/utils/js/todolist.js'
        ]);
        
        // 加载仪表板和图表脚本
        await this.loadScriptsSequentially([
          '/src/utils/js/dashboard.js',
          '/src/utils/js/Chart.roundedBarCharts.js'
        ]);
        this.scriptsLoaded.dashboard = true;
        console.log('所有脚本加载完成');
        
        // 初始化事件监听器和UI组件
        this.initEventListeners();
        this.reinitializeUI();
        this.initializeCharts();
        
        // 加载统计数据
        await this.loadStatisticsData();
        
        // 完成加载
        this.isLoading = false;
      } catch (error) {
        console.error('应用初始化失败:', error);
        this.isLoading = false;
      }
    },
    
    /**
     * 预加载关键CSS样式
     */
    async preloadStyles() {
      const styles = [
        '/src/assets/vendors/feather/feather.css',
        '/src/assets/vendors/mdi/css/materialdesignicons.min.css',
        '/src/assets/vendors/ti-icons/css/themify-icons.css',
        '/src/assets/vendors/typicons/typicons.css',
        '/src/assets/vendors/simple-line-icons/css/simple-line-icons.css',
        '/src/assets/vendors/css/vendor-bundle-base.css'
      ];

      const stylePromises = styles.map(style => {
        return new Promise((resolve, reject) => {
          const link = document.createElement('link');
          link.rel = 'stylesheet';
          link.href = style;
          link.onload = resolve;
          link.onerror = reject;
          document.head.appendChild(link);
        });
      });

      await Promise.all(stylePromises);
    },
    
    /**
     * 显示自定义Toast提示
     * @param {string} title 提示标题
     * @param {string} message 提示内容
     * @param {string} type 提示类型 (info, success, warning, danger)
     */
    showToast(title, message, type = 'info') {
      // 检查jQuery和Bootstrap是否可用
      if (typeof $ !== 'undefined' && $.fn.toast) {
        // 设置标题和消息
        $('#toastTitle').text(title);
        $('#toastMessage').text(message);
        
        // 设置类型样式
        const toast = $('#customToast');
        toast.removeClass('bg-info bg-success bg-warning bg-danger');
        
        // 根据类型设置背景色
        switch (type) {
          case 'info':
            toast.addClass('bg-info text-white');
            break;
          case 'success':
            toast.addClass('bg-success text-white');
            break;
          case 'warning':
            toast.addClass('bg-warning');
            break;
          case 'danger':
            toast.addClass('bg-danger text-white');
            break;
        }
        
        // 显示提示
        toast.toast('show');
      } else {
        // 后备方案：使用标准alert
        alert(`${title}: ${message}`);
      }
    },
    
    /**
     * 退出登录
     */
    logout() {
      // 清除localStorage中的用户信息
      localStorage.removeItem('userInfo');
      // 返回登录页
      this.$router.push('/');
    },
    
    /**
     * 按顺序加载多个脚本
     * @param {Array} urls 脚本URL数组
     * @returns {Promise} 所有脚本加载完成的Promise
     */
    async loadScriptsSequentially(urls) {
      for (const url of urls) {
        try {
          await this.loadScript(url);
          console.log(`✅ ${url} 加载成功`);
        } catch (e) {
          console.error(`❌ ${url} 加载失败`, e);
          // 如果脚本加载失败，继续加载其他脚本而不中断流程
        }
      }
    },
    
    /**
     * 加载单个脚本
     * @param {string} src 脚本URL
     * @returns {Promise} 脚本加载完成的Promise
     */
    loadScript(src) {
      return new Promise((resolve, reject) => {
        // 检查脚本是否已经加载
        const existingScript = document.querySelector(`script[src="${src}"]`);
        if (existingScript) {
          console.log(`脚本 ${src} 已存在，跳过加载`);
          resolve();
          return;
        }
        
        // 创建新的脚本元素
        const script = document.createElement('script');
        script.src = src;
        script.async = true; // 添加async属性以优化加载
        
        // 脚本加载成功的回调
        script.onload = () => {
          console.log(`脚本 ${src} 加载成功`);
          resolve();
        };
        
        // 脚本加载失败的回调
        script.onerror = (e) => {
          console.error(`[加载失败] 请求路径: ${src}`);
          reject(e);
        };
        
        // 将脚本添加到文档中
        document.body.appendChild(script);
      });
    },
    
    /**
     * 加载统计数据
     */
    async loadStatisticsData() {
      // 设置加载状态
      this.isLoading = true;
      
      try {
        // 定义订单统计请求
        const orderStatsRequest = axios({
          method: "POST",
          url: "http://localhost:9001/order/orderDataStatistics",
          timeout: this.apiTimeoutDuration,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        });
        
        // 定义用户统计请求
        const userStatsRequest = axios({
          method: "POST",
          url: "http://localhost:9001/user/newUserStatistics",
          timeout: this.apiTimeoutDuration,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        });
        
        // 同时处理多个请求
        const [orderRes, userRes] = await Promise.all([orderStatsRequest, userStatsRequest]);
        
        // 处理订单统计数据
        this.statisticsdata = orderRes.data;
        
        // 处理用户统计数据
        this.user = userRes.data;
        
        // 显示成功通知
        this.showNotification('数据加载成功', 'success', 3000);
        
      } catch (error) {
        console.error('加载统计数据失败:', error);
        
        // 错误处理和通知
        let errorMsg = '';
        
        if (error.code === 'ECONNABORTED' || error.message.includes('timeout')) {
          errorMsg = '请求超时，服务器未能及时响应，请稍后重试';
        } else if (error.response) {
          switch(error.response.status) {
            case 503:
              errorMsg = '服务暂时不可用，请稍后重试 (503)';
              break;
            case 404:
              errorMsg = '未找到请求的资源 (404)';
              break;
            case 500:
              errorMsg = '服务器内部错误 (500)';
              break;
            default:
              errorMsg = `请求失败 (${error.response.status})`;
          }
        } else if (error.request) {
          errorMsg = '无法连接到服务器，请检查网络连接';
        } else {
          errorMsg = '发送请求时出错: ' + error.message;
        }
        
        // 显示错误通知
        this.showNotification(errorMsg, 'error');
        
        // 使用默认数据
        this.statisticsdata = {
          todayComputer: 0,
          todayComputer_yd: 0,
          todaySettlement: 0,
          todaySettlement_yd: 0,
          todayRecharge: 0,
          todayRecharge_yd: 0,
          todayAverageTime: 0,
          todayAverageTime_yd: 0,
          todayAssembleTime: 0,
          todayAssembleTime_yd: 0
        };
        
        this.user = {
          todayUser: 0,
          yesterdayUser: 0
        };
      } finally {
        this.isLoading = false;
      }
    },
    
    /**
     * 初始化UI元素
     */
    initUI() {
      try {
        // 绑定用户头像的点击事件
        const navProfileLinks = document.querySelectorAll('.nav-profile');
        navProfileLinks.forEach(link => {
          link.addEventListener('click', (e) => {
            e.preventDefault();
            this.showUserInfo();
          });
        });
        
        // 绑定"我的资料"菜单项的点击事件
        const dropdownItems = document.querySelectorAll('.dropdown-item');
        dropdownItems.forEach(item => {
          if (item.textContent.includes('我的资料')) {
            item.addEventListener('click', (e) => {
              e.preventDefault();
              this.showUserInfo();
            });
          }
        });
        
        // 安全地初始化Bootstrap模态框
        const modalElements = document.querySelectorAll('.modal');
        if (modalElements && modalElements.length > 0) {
          console.log('找到模态框元素，准备初始化');
          // 延迟初始化以确保DOM完全准备好
          setTimeout(() => {
            modalElements.forEach(modalEl => {
              if (modalEl && modalEl.parentNode) {
                try {
                  // 使用Bootstrap的Modal初始化
                  new bootstrap.Modal(modalEl);
                } catch (err) {
                  console.error('模态框初始化失败:', err);
                }
              }
            });
          }, 100);
        }
        
        this.uiInitialized = true;
      } catch (error) {
        console.error('UI初始化失败:', error);
      }
    },
    
    /**
     * 显示通知
     * @param {string} message 通知消息
     * @param {string} type 通知类型 success, warning, error, info
     */
    showNotification(message, type = 'info') {
      // 清除之前的超时
      if (this.notification.timeout) {
        clearTimeout(this.notification.timeout);
      }
      
      // 设置通知内容
      this.notification.message = message;
      this.notification.type = type;
      this.notification.show = true;
      
      // 自动关闭通知
      this.notification.timeout = setTimeout(() => {
        this.hideNotification();
      }, 3000);
    },
    
    /**
     * 隐藏通知
     */
    hideNotification() {
      this.notification.show = false;
      if (this.notification.timeout) {
        clearTimeout(this.notification.timeout);
        this.notification.timeout = null;
      }
    },
    
    // 保存布局
    async saveLayout(layoutData) {
      try {
        // 确保布局数据格式正确
        const formattedData = {
          equipmentList: layoutData.map(item => ({
            id: item.id,
            name: item.name,
            status: item.status,
            position: {
              x: item.x,
              y: item.y,
              width: item.width,
              height: item.height
            }
          }))
        };
        
        await layoutApi.saveLayout(formattedData);
        this.showNotification('布局保存成功', 'success');
      } catch (error) {
        this.showNotification(error.message, 'error');
        console.error('保存布局失败:', error);
      }
    },
    
    // 获取布局
    async getLayout() {
      try {
        const response = await layoutApi.getLayout();
        if (response && response.data) {
          // 处理获取到的布局数据
          console.log('获取到的布局:', response.data);
          return response.data;
        }
        return [];
      } catch (error) {
        this.showNotification(error.message, 'error');
        console.error('获取布局失败:', error);
        return [];
      }
    },

    // 关闭上机弹窗
    closeEmbarkationModal() {
      this.showEmbarkationModal = false;
    },

    /**
     * 显示用户上机历史记录
     */
    showUserHistory() {
      // 获取当前登录用户ID
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
      if (!userInfo || !userInfo.id) {
        this.showNotification('请先登录后查看历史记录', 'warning');
        return;
      }
      
      this.showNotification('历史记录功能正在开发中，敬请期待', 'info');
      // TODO: 实现历史记录查询和显示
    },
    
    /**
     * 显示创建用户结果弹窗
     */
    showCreateUserResult() {
      const modalElement = document.getElementById('createUserResultModal');
      
      try {
        if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
          const modal = bootstrap.Modal.getInstance(modalElement) || new bootstrap.Modal(modalElement);
          modal.show();
        } else if (typeof $ !== 'undefined' && $.fn.modal) {
          // 降级为jQuery方式显示
          $('#createUserResultModal').modal('show');
        } else {
          // 最终降级：使用alert
          if (this.createUserSuccess) {
            alert('创建成功：' + this.createUserResultMessage);
          } else {
            alert('创建失败：' + this.createUserResultMessage);
          }
        }
      } catch (error) {
        console.error('显示模态框失败:', error);
        // 降级处理
        if (this.createUserSuccess) {
          alert('创建成功：' + this.createUserResultMessage);
        } else {
          alert('创建失败：' + this.createUserResultMessage);
        }
      }
    },
    
    /**
     * 刷新页面
     */
    reloadPage() {
      window.location.reload();
    },

    // 用户搜索
    async searchUser() {
      if (!this.rechargeForm.searchTerm || this.rechargeForm.searchTerm.trim() === '') {
        this.userSearchResults = [];
        this.hasSearched = false;
        this.showNotification('请输入搜索内容', 'warning');
        return;
      }
      
      this.rechargeLoading = true;
      this.hasSearched = true;
      
      try {
        // 显示搜索开始通知
        this.showNotification('正在搜索用户...', 'info', 1500);
        
        // 获取用户列表
        const response = await axios.post('http://localhost:9001/user/findUser');
        const allUsers = response.data;
        
        // 过滤匹配用户
        const searchTerm = this.rechargeForm.searchTerm.toLowerCase();
        this.userSearchResults = allUsers.filter(user => {
          // 搜索用户ID、手机号或名称
          return (
            (user.number && user.number.toString().includes(searchTerm)) || 
            (user.phone && user.phone.toLowerCase().includes(searchTerm)) ||
            (user.name && user.name.toLowerCase().includes(searchTerm))
          );
        }).slice(0, 5); // 限制显示数量
        
        // 对于Base64编码的字段进行解码
        this.userSearchResults.forEach(user => {
          if (user.phone) {
            user.phone = this.decodeBase64(user.phone);
          }
          if (user.id_number) {
            user.id_number = this.decodeBase64(user.id_number);
          }
        });
        
        console.log('搜索结果:', this.userSearchResults);
        
        // 显示搜索结果通知
        if (this.userSearchResults.length > 0) {
          this.showNotification(`找到 ${this.userSearchResults.length} 个匹配用户`, 'success', 1500);
      } else {
          this.showNotification('未找到匹配的用户', 'warning', 1500);
        }
      } catch (error) {
        console.error('搜索用户失败:', error);
        this.showNotification('搜索用户失败，请稍后重试', 'error');
        this.userSearchResults = [];
      } finally {
        this.rechargeLoading = false;
      }
    },

    // 选择用户进行充值
    selectUserForRecharge(user) {
      this.selectedUser = user;
      this.userSearchResults = [];
      // 清空搜索框，不显示用户名和ID
      this.rechargeForm.searchTerm = '';
      // 重置搜索状态标志
      this.hasSearched = false;
      // 初始化充值金额和备注
      this.rechargeForm.amount = 0;
      this.rechargeForm.text = '';
      this.canSubmitRecharge = true;
    },

    // 清除选中的用户
    clearSelectedUser() {
      this.selectedUser = null;
      this.rechargeForm.amount = 0;
      this.rechargeForm.text = '';
      this.hasSearched = false;
      this.canSubmitRecharge = false;
    },

    // 提交充值
    submitRecharge() {
      // 这里可以添加提交充值的逻辑
      console.log('提交充值:', this.rechargeForm);
      this.rechargeLoading = true;
      // 模拟充值成功
      this.rechargeSuccess = true;
      this.newBalance = this.rechargeForm.amount + (this.selectedUser ? this.selectedUser.balance : 0);
      this.rechargeErrorMessage = '';
      this.rechargeLoading = false;
    },

    // 开始新的充值
    startNewRecharge() {
      this.selectedUser = null;
      this.rechargeForm.amount = 0;
      this.rechargeForm.text = '';
      this.hasSearched = false;
      this.canSubmitRecharge = false;
    },

    // 选择金额
    selectAmount(amount) {
      this.rechargeForm.amount = amount;
    },

    /**
     * 显示用户充值模态框
     */
    showRechargeModal() {
      // 重置充值表单
      this.resetRechargeForm();
      
      // 显示模态框
      try {
        const modal = document.getElementById('rechargeModal');
        if (modal) {
          const bsModal = new bootstrap.Modal(modal);
          bsModal.show();
        }
      } catch (error) {
        console.error('显示充值模态框失败:', error);
        this.showNotification('无法显示充值界面，请刷新页面后重试', 'error');
      }
    },

    /**
     * 重置充值表单
     */
    resetRechargeForm() {
      this.rechargeForm = {
        searchTerm: '',
        amount: 0,
        text: ''
      };
      this.rechargeErrors = {
        amount: ''
      };
      this.selectedUser = null;
      this.userSearchResults = [];
      this.hasSearched = false;
      this.rechargeLoading = false;
      this.canSubmitRecharge = false;
    },

    /**
     * 搜索用户
     */
    async searchUser() {
      if (!this.rechargeForm.searchTerm || this.rechargeForm.searchTerm.trim() === '') {
        this.userSearchResults = [];
        this.hasSearched = false;
        this.showNotification('请输入搜索内容', 'warning');
        return;
      }
      
      this.rechargeLoading = true;
      this.hasSearched = true;
      
      try {
        // 显示搜索开始通知
        this.showNotification('正在搜索用户...', 'info', 1500);
        
        // 获取用户列表
        const response = await axios.post('http://localhost:9001/user/findUser');
        const allUsers = response.data;
        
        // 过滤匹配用户
        const searchTerm = this.rechargeForm.searchTerm.toLowerCase();
        this.userSearchResults = allUsers.filter(user => {
          // 搜索用户ID、手机号或名称
          return (
            (user.number && user.number.toString().includes(searchTerm)) || 
            (user.phone && user.phone.toLowerCase().includes(searchTerm)) ||
            (user.name && user.name.toLowerCase().includes(searchTerm))
          );
        }).slice(0, 5); // 限制显示数量
        
        // 对于Base64编码的字段进行解码
        this.userSearchResults.forEach(user => {
          if (user.phone) {
            user.phone = this.decodeBase64(user.phone);
          }
          if (user.id_number) {
            user.id_number = this.decodeBase64(user.id_number);
          }
        });
        
        console.log('搜索结果:', this.userSearchResults);
        
        // 显示搜索结果通知
        if (this.userSearchResults.length > 0) {
          this.showNotification(`找到 ${this.userSearchResults.length} 个匹配用户`, 'success', 1500);
        } else {
          this.showNotification('未找到匹配的用户', 'warning', 1500);
        }
      } catch (error) {
        console.error('搜索用户失败:', error);
        this.showNotification('搜索用户失败，请稍后重试', 'error');
        this.userSearchResults = [];
      } finally {
        this.rechargeLoading = false;
      }
    },

    /**
     * 选择用户进行充值
     */
    selectUserForRecharge(user) {
      this.selectedUser = user;
      this.userSearchResults = [];
      this.rechargeForm.searchTerm = '';
      this.canSubmitRecharge = true;
    },

    /**
     * 清除选中的用户
     */
    clearSelectedUser() {
      this.selectedUser = null;
      this.rechargeForm.searchTerm = '';
      this.canSubmitRecharge = false;
    },

    /**
     * 选择预设金额
     */
    selectAmount(amount) {
      this.rechargeForm.amount = amount;
      this.validateRechargeAmount();
    },

    /**
     * 验证充值金额
     */
    validateRechargeAmount() {
      if (!this.rechargeForm.amount || this.rechargeForm.amount <= 0) {
        this.rechargeErrors.amount = '请输入有效的充值金额';
        return false;
      }
      
      if (this.rechargeForm.amount > 10000) {
        this.rechargeErrors.amount = '单次最大充值金额为10000元';
        return false;
      }
      
      this.rechargeErrors.amount = '';
      return true;
    },

    /**
     * 提交充值
     */
    async submitRecharge() {
      // 验证表单
      if (!this.selectedUser) {
        this.showNotification('请先选择需要充值的用户', 'warning');
        return;
      }
      
      if (!this.validateRechargeAmount()) {
        return;
      }
      
      // 设置加载状态
      this.rechargeLoading = true;
      
      try {
        // 获取当前登录用户信息
        const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
        const currentUserId = userInfo.number || 0;
        
        // 构建充值请求参数
        const params = new URLSearchParams();
        // 当前登录用户ID作为员工ID
        params.append('ep_id', currentUserId);
        // 被充值用户ID
        params.append('number', this.selectedUser.number);
        // 充值金额
        params.append('amount', this.rechargeForm.amount);
        // 备注
        params.append('text', this.rechargeForm.text || '网吧管理系统充值');
        
        console.log('充值请求参数:', Object.fromEntries(params));
        
        // 发送充值请求
        const response = await axios.post('http://localhost:9001/user/recharge', params, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        });
        
        console.log('充值响应:', response.data);
        
        // 关闭充值模态框
        const modal = document.getElementById('rechargeModal');
        if (modal) {
          const bsModal = bootstrap.Modal.getInstance(modal);
          if (bsModal) {
            bsModal.hide();
          }
        }
        
        // 处理响应结果
        if (response.data === '余额操作失败') {
          this.rechargeSuccess = false;
          this.rechargeErrorMessage = '充值失败，请稍后重试';
        } else {
          this.rechargeSuccess = true;
          this.newBalance = response.data;
        }
        
        // 显示结果模态框
        setTimeout(() => {
          this.showRechargeResult();
        }, 500);
        
        // 刷新统计数据
        this.loadStatisticsData();
        
      } catch (error) {
        console.error('充值失败:', error);
        this.rechargeSuccess = false;
        
        // 获取错误信息
        if (error.response) {
          this.rechargeErrorMessage = `服务器错误: ${error.response.status}`;
        } else if (error.request) {
          this.rechargeErrorMessage = '网络错误，无法连接到服务器';
        } else {
          this.rechargeErrorMessage = `请求错误: ${error.message}`;
        }
        
        // 显示结果模态框
        this.showRechargeResult();
        
      } finally {
        this.rechargeLoading = false;
      }
    },

    /**
     * 显示充值结果模态框
     */
    showRechargeResult() {
      const modal = document.getElementById('rechargeResultModal');
      if (modal) {
        const bsModal = new bootstrap.Modal(modal);
        bsModal.show();
      }
    },

    /**
     * 开始新的充值操作
     */
    startNewRecharge() {
      // 关闭结果模态框
      const modal = document.getElementById('rechargeResultModal');
      if (modal) {
        const bsModal = bootstrap.Modal.getInstance(modal);
        if (bsModal) {
          bsModal.hide();
        }
      }
      
      // 重新打开充值模态框
      setTimeout(() => {
        this.showRechargeModal();
      }, 500);
    },

    /**
     * 应用自定义金额
     */
    applyCustomAmount() {
      if (!this.customAmount || this.customAmount <= 0) {
        this.showNotification('请输入有效的充值金额', 'warning');
        return;
      }
      
      // 将自定义金额应用到充值表单
      this.rechargeForm.amount = parseFloat(this.customAmount);
      this.validateRechargeAmount();
      
      // 显示成功提示
      this.showNotification(`已设置充值金额: ${this.customAmount}元`, 'success', 1500);
      
      // 清空自定义金额输入框
      this.customAmount = null;
    },
  },
  
  // 组件挂载后执行
  mounted() {
    // 确保在DOM完全加载后执行UI初始化
    if (document.readyState === 'complete') {
      this.initUI();
    } else {
      window.addEventListener('load', () => {
        this.initUI();
      });
    }
  },
  
  // 添加更新后钩子，确保组件更新后重新检查和初始化事件
  updated() {
    // 重新检查事件绑定
    this.$nextTick(() => {
      if (!this.eventsInitialized) {
        this.initEventListeners();
      }
      if (!this.uiInitialized) {
        this.reinitializeUI();
      }
    });
  },

  // 添加事件监听器到Vue生命周期钩子
  created() {
    // 立即开始加载脚本和数据
    this.initializeApplication();
    // 添加重试事件监听器
    document.addEventListener('retry-request', this.loadStatisticsData);
    
    // 检查用户角色并初始化正确的视图
    try {
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
      if (userInfo && userInfo.job !== undefined) {
        console.log('初始化界面: 用户角色为', userInfo.job === 1 ? '管理员' : '普通用户');
        // 可以在这里添加针对不同角色的初始化逻辑
      } else {
        console.warn('用户信息中未找到job属性，默认显示普通用户界面');
      }
    } catch (error) {
      console.error('解析用户信息时出错:', error);
    }
  },

  // 在beforeDestroy中移除事件监听器
  beforeDestroy() {
    // 移除事件监听器
    document.removeEventListener('retry-request', this.loadStatisticsData);
    
    // 清除通知计时器
    if (this.notification && this.notification.timeout) {
      clearTimeout(this.notification.timeout);
    }
  },
};
</script>

<!--定义组件：CSS样式-->
<style scoped>
@import '@/assets/vendors/feather/feather.css';
@import '@/assets/vendors/mdi/css/materialdesignicons.min.css';
@import '@/assets/vendors/ti-icons/css/themify-icons.css';
@import '@/assets/vendors/typicons/typicons.css';
@import '@/assets/vendors/simple-line-icons/css/simple-line-icons.css';
@import '@/assets/vendors/css/vendor-bundle-base.css';

/* 用户资料弹窗样式 */
.modal-content {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-header {
  padding: 1.25rem 1.5rem 0;
}

.modal-title {
  font-weight: 600;
  color: #2c3e50;
  font-size: 1.1rem;
}

.modal-body {
  padding: 0;
}

/* 用户资料头部样式 */
.user-profile-header {
  padding: 1.5rem;
  background: #f8f9fa;
}

.profile-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-image-wrapper {
  position: relative;
  margin-right: 15px;
}

.profile-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.profile-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #fff;
}

.profile-status.active {
  background-color: #00d25b;
  color: white;
}

.profile-status.inactive {
  background-color: #fc424a;
  color: white;
}

.profile-status i {
  font-size: 14px;
}

.profile-info {
  flex: 1;
}

.profile-info h4 {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
}

.user-profile-details {
  padding: 1.5rem;
}

.info-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.info-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.info-item i {
  font-size: 24px;
  margin-right: 15px;
}

.info-content {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 2px;
}

.info-value {
  font-size: 1rem;
  color: #2c3e50;
}

.user-profile-actions {
  border-top: 1px solid rgba(0,0,0,0.05);
}

.modal-footer {
  border-top: none;
  padding: 1rem 1.5rem 1.5rem;
}

/* 动画效果 */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.user-profile-header,
.user-profile-details,
.user-profile-actions {
  animation: fadeInRight 0.3s ease-out forwards;
}

/* 加载动画样式 */
.spinner-border {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 0.15rem;
}

/* 关闭按钮样式 */
.btn-close {
  background: transparent;
  border: none;
  padding: 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.btn-close:hover {
  opacity: 0.75;
}

/* 模态框底部按钮样式 */
.modal-footer .btn {
  padding: 0.4rem 1rem;
  font-weight: 500;
  border-radius: 6px;
  font-size: 0.875rem;
}

.modal-footer .btn-light {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #495057;
}

.modal-footer .btn-light:hover {
  background: #e9ecef;
}

/* 动画效果 */
.modal.fade .modal-dialog {
  transition: transform 0.2s ease-out;
  transform: translate(0, -10px);
}

.modal.show .modal-dialog {
  transform: translate(0, 0);
}

.info-item {
  animation: slideIn 0.2s ease-out forwards;
  opacity: 0;
}

.info-item:nth-child(1) { animation-delay: 0.05s; }
.info-item:nth-child(2) { animation-delay: 0.1s; }
.info-item:nth-child(3) { animation-delay: 0.15s; }
.info-item:nth-child(4) { animation-delay: 0.2s; }

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 通知样式 */
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

.notification {
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 300px;
  max-width: 450px;
  animation: slideIn 0.3s ease-out forwards;
}

.notification-content {
  display: flex;
  align-items: center;
}

.notification-content i {
  margin-right: 10px;
  font-size: 20px;
}

.notification.success {
  background-color: #d1e7dd;
  color: #0f5132;
  border-left: 4px solid #0f5132;
}

.notification.warning {
  background-color: #fff3cd;
  color: #856404;
  border-left: 4px solid #856404;
}

.notification.error {
  background-color: #f8d7da;
  color: #842029;
  border-left: 4px solid #842029;
}

.notification.info {
  background-color: #cff4fc;
  color: #055160;
  border-left: 4px solid #055160;
}

.close-btn {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font-size: 16px;
  padding: 0 0 0 10px;
}

.close-btn:hover {
  opacity: 1;
}

/* 创建用户弹窗样式 */
#createUserModal .modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

#createUserModal .modal-header {
  padding: 1.5rem;
  position: relative;
}

#createUserModal .form-control-lg {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}

#createUserModal .spinner-container {
  background-color: white;
  padding: 2rem 3rem;
  border-radius: 1rem;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.5s ease;
}

#createUserModal .spinner-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
}

#createUserModal .spinner-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid rgba(75, 73, 172, 0.1);
  border-top-color: #4B49AC;
  border-radius: 50%;
  animation: spinner-rotate 1.2s linear infinite;
}

#createUserModal .spinner-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  background-color: #4B49AC;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spinner-pulse 1s ease-in-out infinite alternate;
}

/* 确保按钮样式与登录页一致 */
#createUserModal .btn-primary {
  background-color: #4B49AC;
  border-color: #4B49AC;
}

#createUserModal .btn-primary:hover {
  background-color: #3D3C8A;
  border-color: #3D3C8A;
}

/* 动画效果 */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes spinner-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spinner-pulse {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* 结果弹窗样式 */
.custom-modal .modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.custom-modal .modal-header {
  padding: 1.5rem;
  position: relative;
}

.custom-modal .icon-container {
  width: 90px;
  height: 90px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  transform: scale(0.5);
  animation: scaleIn 0.5s ease forwards;
}

.custom-modal .success-icon {
  background-color: rgba(87, 182, 87, 0.1);
  color: var(--theme-success, #57B657);
}

.custom-modal .error-icon {
  background-color: rgba(255, 193, 0, 0.1);
  color: var(--theme-warning, #FFC100);
}

.custom-modal .icon-container i {
  font-size: 3.5rem;
}

.custom-modal .result-heading {
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.5s ease 0.2s forwards;
}

.custom-modal .text-muted {
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.5s ease 0.3s forwards;
}

.custom-modal .modal-footer button {
  border-radius: 50px;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* 主题按钮 */
.btn-theme {
  background-color: var(--theme-primary, #4B49AC);
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.btn-theme:hover {
  background-color: var(--theme-primary-dark, #3D3C8A);
  box-shadow: 0 5px 15px rgba(75, 73, 172, 0.3);
  transform: translateY(-2px);
}

/* 动画效果 */
@keyframes scaleIn {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeInUp {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* 其他样式保持不变 */

/* 用户充值相关样式 */
.search-results {
  max-height: 250px;
  overflow-y: auto;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-results .list-group-item {
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.search-results .list-group-item:hover {
  background-color: rgba(75, 73, 172, 0.08);
  border-left: 3px solid var(--theme-primary, #4B49AC);
  transform: translateX(5px);
}

.quick-amounts .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.quick-amounts .btn {
  flex: 1 0 calc(25% - 0.5rem);
  border-radius: 50px;
  margin: 0;
  transition: all 0.2s ease;
  padding: 0.75rem 0;
}

.quick-amounts .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.quick-amounts .btn:active {
  transform: translateY(-1px);
}

.custom-amount .input-group {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border-radius: 0.375rem;
  overflow: hidden;
}

.custom-amount .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 50px;
  font-size: 1.1rem;
}

.custom-amount .btn {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-weight: 500;
}

#rechargeModal .modal-header {
  border-bottom: none;
}

#rechargeModal .modal-content {
  border: none;
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
}

#rechargeResultModal .modal-body i {
  animation: scale-in 0.5s ease forwards;
}

@keyframes scale-in {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
</style>

